Adiós al espagueti de archivos: la guía definitiva para estructurar tu proyecto en Vue 3

¿Te ha pasado? Creas un proyecto nuevo con npm create vue@latest y al principio todo es calma y tranquilidad. Pero a medida que la aplicación crece, tu carpeta src se convierte en un laberinto de archivos, componentes sin nombre y lógica regada por todas partes. De repente, encontrar cualquier cosa es una odisea, y tu yo del futuro ya está llorando.

Estructurar un proyecto no es solo una buena práctica; es una inversión en tu salud mental y en la escalabilidad de tu app. Un código bien organizado es más fácil de mantener, escalar y entender, sobre todo si trabajas en equipo. Hoy te muestro una estructura que te ayudará a pensar como arquitecto y no como un constructor caótico.

La base: una estructura que tenga sentido

El primer paso es poner unos cimientos sólidos. Esta es una estructura lógica que se adapta a casi cualquier proyecto de Vue, desde un portafolio pequeño hasta una aplicación grande:

  
src/
├── components/           # Componentes reutilizables (botones, tarjetas, inputs)
├── views/                # Vistas principales (Home, About, Dashboard)
├── assets/               # Archivos estáticos (imágenes, fuentes, CSS global)
├── router/               # Lógica de rutas
├── stores/               # Gestión del estado (con Pinia)
├── composables/          # Funciones reutilizables de Vue
├── services/             # Lógica de comunicación con la API
├── App.vue
└── main.js

  

• components/: Componentes reutilizables como BaseButton.vue o UserProfileCard.vue. La idea es que sean «tontos» (sin lógica de negocio) y se ocupen solo de cómo se ven.
• views/: Las páginas principales de tu app, como HomePage.vue o ProductDetailPage.vue. Suelen combinar varios componentes.
• stores/: Con Pinia, gestionar el estado es más sencillo. Aquí podrías tener un auth.js que se encargue de la autenticación del usuario.
• services/: La lógica para hablar con la API. Así tus componentes quedan limpios y los cambios de endpoints están en un solo sitio.

Componentes: organizarlos con cabeza

Dentro de la carpeta components/ puedes aplicar el concepto de Atomic Design. Este enfoque clasifica tus componentes en piezas pequeñas y reutilizables:

• Átomos: Los componentes más básicos, como BaseButton.vue o InputField.vue.
• Moléculas: Grupos de átomos que trabajan juntos, como LoginForm.vue.
• Organismos: Conjuntos de moléculas que forman secciones completas, como Header.vue.

El toque profesional: convenciones de nombres

Usar nombres coherentes como BaseButton.vue (genérico) o UserProfileCard.vue (específico) permite que cualquier desarrollador entienda rápido qué es cada archivo. Es la guinda de una estructura sólida.

Conclusión

Una buena estructura no es algo que se hace «si sobra tiempo». Es la base de un proyecto sostenible. Invirtiendo unos minutos en ordenar tus archivos desde el principio, te ahorras horas (y lágrimas) en el futuro. Piensa en tu código como un juego de piezas de Lego bien clasificadas: al final construirás interfaces más rápido y más sólidas.