Estructura de un proyecto de Vue.js

Punto de entrada de la aplicación. Aquí se monta Vue y se configura la aplicación.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import './assets/main.css'

const app = createApp(App)

app.use(router)

app.mount('#app')

El componente raíz de la aplicación:

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" src="./assets/logo.svg" width="125" height="125" />
    <div class="wrapper">
      <HelloWorld msg="¡Bienvenido a tu aplicación Vue 3!" />
      <nav>
        <RouterLink to="/">Inicio</RouterLink>
        <RouterLink to="/about">Acerca de</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

<style scoped>
header {
  line-height: 1.5;
  max-height: 100vh;
}

/* Más estilos... */
</style>

Este directorio contiene recursos estáticos como imágenes, fuentes y estilos globales. A diferencia de los archivos en public/, los archivos en assets/ son procesados por el sistema de compilación de Vue.

import '@/assets/global.css';

Este directorio almacena recursos estáticos que serán procesados por Vite. Por ejemplo,

assets/
├── logo.svg
└── main.css

Este directorio almacena los componentes reutilizables de Vue. Los componentes en Vue son piezas independientes de interfaz que podemos combinar para construir la estructura de la aplicación.

Cada componente Vue tiene su propio archivo .vue, que incluye el template, script y estilos.

Los componentes se deben nombrar usando el formato PascalCase (HelloWorld.vue) o kebab-case (hello-world.vue) para seguir las convenciones de Vue. Por ejemplo,

components/
├── HelloWorld.vue
├── TheHeader.vue
├── TheFooter.vue
└── ui/
    ├── BaseButton.vue
    └── BaseInput.vue

Aquí almacenamos las vistas principales de la aplicación, que suelen estar asociadas a rutas específicas de Vue Router. Por ejemplo,

views/
├── HomeView.vue
└── AboutView.vue

Aquí configuramos Vue Router para gestionar la navegación en nuestra aplicación. Por ejemplo,

router/
└── index.js

Para gestión de estado con Pinia (si la usamos claro). Por ejemplo,

stores/
└── counter.js

Para APIs y servicios externos. Por ejemplo,

services/
├── api.js
└── authService.js

Los composables son funciones reutilizables que encapsulan lógica compartida. Por ejemplo,

utils/
├── useFilterTable.js
└── useValidateNumber.js

Para funciones de utilidad. Por ejemplo,

utils/
├── formatter.js
└── validation.js