Una de las características principales de Nuxt es el soporte para capas y extensiones. Puedes extender una aplicación Nuxt predeterminada para reutilizar componentes, utilidades y configuraciones. La estructura de las capas es casi idéntica a una aplicación estándar de Nuxt, lo que las hace fáciles de crear y mantener.

Casos de Uso

• Compartir configuraciones reutilizables entre proyectos usando nuxt.config y app.config
• Crear una biblioteca de componentes usando el directorio components/
• Crear una biblioteca de utilidades y composables usando los directorios composables/ y utils/
• Crear preajustes de módulos de Nuxt
• Compartir configuraciones estándar entre proyectos
• Crear temas de Nuxt
• Mejorar la organización del código implementando una arquitectura modular y soportar el patrón de Diseño Orientado al Dominio (DDD) en proyectos a gran escala.

Uso

Por defecto, cualquier capa dentro de tu proyecto en el directorio ~~/layers se registrará automáticamente como capas en tu proyecto.

Además, se crearán automáticamente alias de capas nombradas al srcDir de cada una de estas capas. Por ejemplo, podrás acceder a la capa ~~/layers/test a través de #layers/test.

Además, puedes extender desde una capa agregando la propiedad extends a tu archivo nuxt.config.

export default defineNuxtConfig({
  extends: [
    '../base',                     // Extender desde una capa local
    '@my-themes/awesome',          // Extender desde un paquete npm instalado
    'github:my-themes/awesome#v1', // Extender desde un repositorio git
  ]
})

También puedes pasar un token de autenticación si estás extendiendo desde un repositorio privado de GitHub:

export default defineNuxtConfig({
  extends: [
    // configuración por capa
    ['github:my-themes/private-awesome', { auth: process.env.GITHUB_TOKEN }]
  ]
})

export default defineNuxtConfig({
  extends: [
    [
      'github:my-themes/awesome',
      { 
        meta: {
          name: 'my-awesome-theme',
        },
      },
    ],
  ]
})

Nuxt utiliza unjs/c12 y unjs/giget para extender capas remotas. Consulta la documentación para obtener más información y todas las opciones disponibles.

Ejemplos