How to structure and organize components?

Question

Vue.js

I couldn't be happier that thanks to Vue I can give up the stupid BAM and torment with naming, which I can't stand, so I ran into another problem. How to organize component files?
Somehow it's not very cool to have 200 files in one folder. The official styleguide only deals with filenames, not their logical organization. This helps a little, but the question is not about naming the files.
For example, there are such components:

FullscreenMenu.vue
FullscreenNav.vue
FullscreenOverlay.vue
Logo.vue
MainNav.vue
TheHeader.vue
TheFooter.vue
AppInput.vue

After reading the google recommendations, I have so far settled on the following folders:
1. layoutfor components that are used once, for example TheHeader.vueTheFooter.vue
2. uifor components of interface elements, from this example AppInput.vue
There is also advice for components like

FullscreenMenu.vue
FullscreenNav.vue
FullscreenOverlay.vue

create a separate folder, but I don't like this organization.
And where to put Logo.vue? I can use it not only in TheHeader.vue, but throughout the application.
In addition, it is not clear where to shove then MainNav.vue? This is navigation from TheHeader.vueand it is also used 1 time, but IMHO it has layoutnothing to do ...
In short, chaos.
How are you doing?

Answer 1

If MainNav is used once in the header, why not call it HeaderNav?
What I'm leaning towards (and it seems to me that the vue style guide inclines us):
- separate the main pages and the entities in them (components)
- put the pages in the pages or layouts folder, put the components in the components folder
- while the pages can contain business logic like this like requests to the API or work with the store, the components should be as clean and reusable as possible (imagine that you write a public UI library in the components)
- you don’t have to create any folders in the pages (although if it’s nuxt, then ok), in the components, on the contrary, you should create folders with the entities that we selected in step 1. That is, we have an entity / header section, at the output we have:
Header
---Header.vue
---HeaderNav.vue
---HeaderNavItem.vue
---HeaderAuth.vue

Answer 2

Try to separate components according to their essence:
1. Atoms/blocks are indivisible components, parts of other components with a minimum set of characteristics. Perform one single task.
2. Container - components that appear once per page. Header, footer, navigation, it's all here.
3. Independent components - grouped components that reflect the essence of the task they solve.
As a result, the structure might look like this:
atoms
--button
--textInput
container
--header
--footer
--mainNav
layout
--columns
--grid
--inline
overlays
--overlay
users
--userName
--userAvatar
--userItem
BEM should not be completely abandoned, it will save you a lot of time when you need to change something in components in a month or more.