CODEWITHSUNDEEP
vue.jsnaming-conventionsnamingconventions
instanceofnull
instanceofnull

Reputation: 1071

Vue.js naming conventions: 'children' of single-instance components

I have been trying to adhere to the coding standards proposed in the Vue Style Guide, but I'm not sure how to tackle this particular situation. As per the guide:

  1. Components that should only ever have a single active instance should begin with the The prefix, to denote that there can be only one (link).
  2. Child components that are tightly coupled with their parent should include the parent component name as a prefix (link).

How should these combine? Imagine a typical web page with a single-instance header. Inside it we would have a number of header links, specific to the header (they wouldn't appear elsewhere).

If I follow (1), my header component becomes TheHeader, but if I were to also follow (2) I would have to name my header links TheHeaderLink. This is misleading, since there will typically be more than one. If I drop the The for links, I lose the benefit of having coupled components listed together alphabetically.

Conversely, if I drop the The for the header and go with AppHeader and AppHeaderLink, I'm no longer conveying the fact that the header is a singleton.

I guess this boils down to personal preference and/or coding team standards, but maybe there's some convention or solution I'm failing to see?

Upvotes: 4

Views: 1293

Answers (1)

Yom T.
Yom T.

Reputation: 9180

Given that Node.js allows you to require or import folders as modules, I personally like to "enclose" or organize child components (tightly coupled with their parent) in a self-contained folder, and provide a single entry point to it.

So, I would go from this...

components/
|- TheHeader.vue
|- TheHeaderLink.vue
|- TheHeaderLogo.vue

...to that:

components/
|- TheHeader/
   |- index.vue
   |- HeaderLink.vue
   |- HeaderLogo.vue

With the index.vue being the (aforementioned) entry point, which is basically your original TheHeader component renamed.

And of course you would import it as usual:

import TheHeader from '@/components/TheHeader';
// or
const TheHeader = require('@/components/TheHeader');

But yeah, I think it's just a matter of preference.

Upvotes: 6

Related Questions