While rewriting the Mealie Frontend in Nuxt and Typescript I've come to really enjoy the choices Nuxt makes in its auto-generated routes that encourage consistency and clarity when laying out files. This has been a key benefit of the re-write. Unfortunately, Nuxt and Vue don't provide strong guidelines on how to organize components inside your components folder. As a part of the rewrite, I've completely re-organized all of them using a 3 folder system.
This folder is for widely reused components that provide little functionality and are primarily used for styling or consistency in layouts. Primary examples are Card and Button components.
The layout folder is for reusable components that are specifically only used in the layouts for the Nuxt Application. They may take props or may not. They should be larger layout-style components that don't have the ability to be widely reused in the application.
Domain Components are specific to the domain or section of a website. For example, if you have an admin page and a user page that have specific, private elements. These can be placed in the Domain/Admin folder.
Examples: AdminDashboard, AdminSettings, UserProfile
Adopting this during the rewrite along with following the Vue Style Guide has already made a significant improvement in organization and clarity on where things belong. I'm skeptical on how well this might scale on a larger corporate team scale but I'm confident that for small-to-mid-sized projects it's a great fit for quick and simple organization.
You can see the work in progress in the