Wrangling The Vue Components Folder

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.

The Global Folder

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.

Rules

• Global components should not be in sub-folders
• All elements should start with the ‘Base’ Prefix

The Layout Folder

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.

Rules:

• The layout folder should not have any sub-folders
• If they take props they should start with an ‘App’ Prefix.
• If they do not they should begin with the ‘The’ prefix.

The Domain Folder

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.

Rules

• Components should be prefixed with their domain name

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 mealie-next branch