Estructura de proyectos y enrutamiento basado en archivos en Nuxt 3
Importación automática de pages/, layouts/ y components/, nombres de archivos para rutas anidadas y rutas comodín
Estructura de proyectos y enrutamiento basado en archivos en Nuxt 3 es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Qué es Nuxt 3
Nuxt 3 es un metaframework creado sobre Vue 3. Añade renderizado en el servidor, enrutamiento basado en archivos, autoimportaciones y un motor de servidor para que pueda crear aplicaciones Vue full-stack con casi ninguna configuración.
El directorio pages
El directorio pages/ controla el enrutamiento. Cada archivo .vue se convierte automáticamente en una ruta, sin configuración manual del router. pages/about.vue corresponde a /about.
pages/
index.vue -> /
about.vue -> /about
contact.vue -> /contactActivación del router
El router se activa en cuanto existe un directorio pages/. Añada <NuxtPage /> en app.vue para renderizar la página correspondiente.
<!-- app.vue -->
<template>
<NuxtPage />
</template>Rutas anidadas
Las carpetas crean rutas anidadas. pages/blog/index.vue sirve /blog y pages/blog/archive.vue sirve /blog/archive.
pages/
blog/
index.vue -> /blog
archive.vue -> /blog/archiveSegmentos dinámicos con [id]
Rodee un nombre de archivo con corchetes para crear un segmento dinámico. pages/users/[id].vue coincide con /users/42 y expone el id como parámetro de ruta.
// pages/users/[id].vue
const route = useRoute()
const id = route.params.id // "42"Captura de cualquier ruta con [...slug]
La forma extendida [...slug].vue es una ruta de captura total. Coincide con cualquier profundidad de ruta y resulta ideal para contenido de un CMS o para gestionar errores 404 personalizados.
pages/
[...slug].vue -> /a, /a/b, /a/b/c ...Directorio layouts
La carpeta layouts/ contiene componentes envolventes compartidos entre páginas: encabezados, barras laterales y pies de página. layouts/default.vue envuelve todas las páginas, salvo que se indique lo contrario.
<!-- layouts/default.vue -->
<template>
<header>My Site</header>
<slot />
</template>Elección de un layout
Una página elige un layout mediante definePageMeta. El slot del layout renderiza el contenido de la página.
<script setup>
definePageMeta({ layout: 'admin' })
</script>Componentes autoimportados
Todo lo que se encuentra en components/ se autoimporta; no hace falta ninguna instrucción de importación. Las carpetas anidadas añaden un prefijo al nombre: components/base/Button.vue se convierte en <BaseButton />.
components/
TheHeader.vue -> <TheHeader />
base/Button.vue -> <BaseButton />Composables autoimportados
El directorio composables/ también se autoimporta. Las funciones exportadas allí, así como las funciones integradas de Nuxt como useFetch, se pueden usar en cualquier lugar sin importaciones.
// composables/useCounter.ts
export const useCounter = () => useState("c", () => 0)
// usable in any component without importingOtros directorios clave
Nuxt también define plugins/ (se ejecuta al iniciar), middleware/ (protecciones de rutas), server/ (lógica de API y del servidor) y public/ (recursos estáticos servidos tal cual).
Comprobación rápida
Compruebe sus conocimientos sobre la estructura y el enrutamiento de Nuxt.
Resumen
Ha aprendido la estructura de Nuxt:
- pages/ proporciona enrutamiento basado en archivos; las carpetas anidan las rutas.
- [id] es un segmento dinámico y [...slug] captura cualquier ruta.
- layouts/ envuelve las páginas y se elige mediante definePageMeta.
- components/ y composables/ se autoimportan.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 42
- Lecciones
- 156
Preguntas frecuentes
¿La lección «Estructura de proyectos y enrutamiento basado en archivos en Nuxt 3» es gratis?
Sí — el texto completo de «Estructura de proyectos y enrutamiento basado en archivos en Nuxt 3» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Estructura de proyectos y enrutamiento basado en archivos en Nuxt 3»?
Importación automática de pages/, layouts/ y components/, nombres de archivos para rutas anidadas y rutas comodín Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Estructura de proyectos y enrutamiento basado en archivos en Nuxt 3»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Estructura de proyectos y enrutamiento basado en archivos en Nuxt 3
- Obtención de datos: useFetch y useAsyncData
- Rutas de servidor y endpoints de API en Nuxt
- Modo SSR frente a SSG y SPA