CODEWITHSUNDEEP
vue.jsvuejs2
Onyx
Onyx

Reputation: 5772

Is it a bad practice to have 2 components with the same name if they're in different folders?

Lets say I have a website where I sell some sort of products. I'd have a Product.vue component which will be used to render all the products the user would see on the home screen.

I'd also need a second component that will be used to render the products on the admin panel, where the admin will be able to edit/delete.

Obviously both components will render a product, but they'll look different, have different functionality so I assume I can't make an all-mighty universal component for that, so I'd need 2 different components.

Now I'm really confused how to name my components. Currently I have the following folder structure:

Components
---Admin
------Product.vue
---Product.vue

So in the components folder I have a Product.vue and the Admin folder, which contains the admin Product.vue. I'm wondering if having 2 components with the same name in different folder is a bad practice?

The second alternative is calling the admin product AdminProduct.vue

Upvotes: 1

Views: 3643

Answers (2)

Michal Levý
Michal Levý

Reputation: 37793

Two components with the same name in the single app is never a good idea from maintainer point of view.

Lot of useful info can be gained from Vue Style Guide

  1. Multi-word component names

Component names should always be multi-word, except for root App components, and built-in components provided by Vue, such as <transition> or <component>.

This prevents conflicts with existing and future HTML elements, since all HTML elements are a single word.

  1. Tightly coupled component names

Child components that are tightly coupled with their parent should include the parent component name as a prefix. If a component only makes sense in the context of a single parent component, that relationship should be evident in its name.

So AdminProduct.vue is fine... And instead of Product.vue it should be a ProductView.vue

Upvotes: 2

Las Ten
Las Ten

Reputation: 1175

Vue has an object hierarchy and beyond that it can render even multiple instances of the same component. So object-wise you're good.

Regarding the file names, I don't see big risks in it because one of the Product.vue files is clearly in the Admin folder and the other is not. However if this is a project that will be worked on by multiple developers, it might be wiser to name them differently. Not because git can't deal with directory structures, but because humans can make errors. At least I do it all the time.

Upvotes: 2

Related Questions