Goodbye to file spaghetti: The definitive guide to structuring your project in Vue 3

Has it happened to you? You create a new project with npm create vue@latest and at first everything feels calm and peaceful. But as the application grows, your src folder turns into a maze of files, nameless components, and scattered logic everywhere. Suddenly, finding anything feels like an odyssey, and your future self is already crying.

Structuring a project isn’t just a best practice; it’s an investment in your mental health and in your app’s scalability. Well-organized code is easier to maintain, scale, and understand—especially if you work in a team. Today I’ll show you a structure that will help you think like an architect, not a chaotic builder.

The foundation: A structure that makes sense

The first step is setting a solid foundation. Here’s a logical structure that adapts to almost any Vue project, from a small portfolio to a large-scale application:

  
src/
├── components/           # Reusable components (buttons, cards, inputs)
├── views/                # Main views (Home, About, Dashboard)
├── assets/               # Static files (images, fonts, global CSS)
├── router/               # Routing logic
├── stores/               # State management (using Pinia)
├── composables/          # Reusable Vue functions
├── services/             # API interaction logic
├── App.vue
└── main.js

  

• components/: Reusable components like BaseButton.vue or UserProfileCard.vue. The idea is they should be “dumb” (no business logic), only focused on how they look.
• views/: The main pages of your app, like HomePage.vue or ProductDetailPage.vue. They usually combine multiple components.
• stores/: With Pinia, state management is simpler. Here you might have an auth.js handling user authentication.
• services/: Logic for API interactions. This keeps your components clean and centralizes endpoint changes.

Components: Organizing them smartly

Inside the components/ folder, you can apply the concept of Atomic Design. This approach classifies your components into small reusable pieces:

• Atoms: The most basic components, like BaseButton.vue or InputField.vue.
• Molecules: Groups of atoms working together, like LoginForm.vue.
• Organisms: Sets of molecules forming entire sections, like Header.vue.

The pro touch: Naming conventions

Using consistent names like BaseButton.vue (generic) or UserProfileCard.vue (specific) makes it easy for any developer to quickly understand what each file is. It’s the cherry on top of a solid structure.

Conclusion

A good structure isn’t something you do “if you have time.” It’s the foundation of a sustainable project. By investing a few minutes in organizing your files from the start, you save yourself hours (and tears) in the future. Think of your code as a set of well-sorted Lego pieces: in the end, you’ll build interfaces faster and more solidly.