Does such a convention for naming components and classes in vue.js have the right to exist?

Question

css

Once again, thinking about the structure of my project and studying the vue.js style guide, I came to my own version of the naming of components and styles in them. The main issue for me was the problem with how to name nested components. Previously, I used names like Component.vue, ComponentNestedElement.vue, etc. But what does this give us? How can we understand the nesting structure of a component by its name? How to understand that ComponentNestedElement.vue is nested in Component.vue, and not in ComponentNested.vue, which in turn is nested in Component.vue? It seems that everyone uses this convention for component names, but it obviously leads to confusion.
I also used BEM for class names, which in turn also has the same problems.

So I came up with this convention for component names: ComponentName-NestedComponentName
And this convention for class names: ComponentName-NestedComponentName__elementName-nestedElementName--modifierName

Why doesn't everyone use something like this?

Answer 1

Some perversion. There is no need for this. The BEM that you've definitely made a tracing paper from, applies nicely to the directory hierarchy, which allows you to understand what's nested where by importing. The same BEM, by the way, promotes the self-sufficiency of components with minimal dependencies between them. Exceptions - when an element is really intended for a specific domain, it is possible and necessary to indicate ownership there. HeaderMenu, TableCell and so on.
Moreover, nesting. Today it is like this, and tomorrow it is like this. I settled on a domain-driven structure a long time ago and I have no regrets, in my opinion, it is ideal. We simply declaratively distribute the components according to their areas of responsibility, by domains. HeaderMenu to Header and so on.

Answer 2

Just don't store a bunch of components in the same folder. Nobody forbids you to create subfolders...

Answer 3

The names of the components are only responsible for what they are / what role they play. Why shift to them the description of the structure that directories are good at?
The composition of the components just falls on the hierarchical directory structure.
If component B is used only in component A, then B must be nested in the directory in which A is located. If component C is used in both A and B, then it can be moved to the appropriate level in the shared directory
For example

/src
  /components
    /Header
      index.vue
    / Main
      /Sidebar
        index.vue
      /shared
      index.vue