Uma das principais características do Nuxt é o suporte a camadas e extensões. Você pode estender uma aplicação Nuxt padrão para reutilizar componentes, utilitários e configurações. A estrutura das camadas é quase idêntica a uma aplicação Nuxt padrão, o que as torna fáceis de criar e manter.

Casos de Uso

• Compartilhar predefinições de configuração reutilizáveis entre projetos usando nuxt.config e app.config
• Criar uma biblioteca de componentes usando o diretório components/
• Criar uma biblioteca de utilitários e composables usando os diretórios composables/ e utils/
• Criar predefinições de módulos Nuxt
• Compartilhar configurações padrão entre projetos
• Criar temas Nuxt
• Melhorar a organização do código implementando uma arquitetura modular e suportar o padrão de Design Orientado a Domínio (DDD) em projetos de grande escala.

Uso

Por padrão, qualquer camada dentro do seu projeto no diretório ~~/layers será automaticamente registrada como camadas no seu projeto.

Além disso, aliases de camadas nomeadas para o srcDir de cada uma dessas camadas serão automaticamente criados. Por exemplo, você poderá acessar a camada ~~/layers/test via #layers/test.

Além disso, você pode estender uma camada adicionando a propriedade extends ao seu arquivo nuxt.config.

export default defineNuxtConfig({
  extends: [
    '../base',                     // Estender de uma camada local
    '@my-themes/awesome',          // Estender de um pacote npm instalado
    'github:my-themes/awesome#v1', // Estender de um repositório git
  ]
})

Você também pode passar um token de autenticação se estiver estendendo de um repositório privado do GitHub:

export default defineNuxtConfig({
  extends: [
    // configuração por camada
    ['github:my-themes/private-awesome', { auth: process.env.GITHUB_TOKEN }]
  ]
})

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

O Nuxt usa unjs/c12 e unjs/giget para estender camadas remotas. Consulte a documentação para mais informações e todas as opções disponíveis.

Exemplos