O Nuxt fornece um arquivo de configuração app.config para expor configurações reativas dentro de sua aplicação, com a capacidade de atualizá-las em tempo de execução dentro do ciclo de vida ou usando um plugin do Nuxt e editando-o com HMR (substituição de módulo a quente).

Você pode facilmente fornecer configuração de aplicativo em tempo de execução usando o arquivo app.config.ts. Ele pode ter extensões .ts, .js ou .mjs.

export default defineAppConfig({
  foo: 'bar'
})

Uso

Para expor configurações e variáveis de ambiente para o restante do seu aplicativo, você precisará definir a configuração no arquivo app.config.

export default defineAppConfig({
  theme: {
    primaryColor: '#ababab'
  }
})

Agora podemos acessar universalmente theme tanto ao renderizar a página no servidor quanto no navegador usando o composable useAppConfig.

const appConfig = useAppConfig()

console.log(appConfig.theme)

A utilidade updateAppConfig pode ser usada para atualizar o app.config em tempo de execução.

const appConfig = useAppConfig() // { foo: 'bar' }

const newAppConfig = { foo: 'baz' }

updateAppConfig(newAppConfig)

console.log(appConfig) // { foo: 'baz' }

Tipagem do App Config

O Nuxt tenta gerar automaticamente uma interface TypeScript a partir da configuração do aplicativo fornecida, para que você não precise digitá-la você mesmo.

No entanto, há alguns casos em que você pode querer digitá-la você mesmo. Existem duas coisas possíveis que você pode querer digitar.

Entrada do App Config

AppConfigInput pode ser usado por autores de módulos que estão declarando quais opções de entrada válidas são ao definir a configuração do aplicativo. Isso não afetará o tipo de useAppConfig().

declare module 'nuxt/schema' {
  interface AppConfigInput {
    /** Configuração do tema */
    theme?: {
      /** Cor primária do aplicativo */
      primaryColor?: string
    }
  }
}

// É sempre importante garantir que você importe/exports algo ao aumentar um tipo
export {}

Saída do App Config

Se você quiser digitar o resultado da chamada de useAppConfig(), então você vai querer estender AppConfig.

declare module 'nuxt/schema' {
  interface AppConfig {
    // Isso substituirá inteiramente a propriedade `theme` inferida existente
    theme: {
      // Você pode querer digitar este valor para adicionar tipos mais específicos do que o Nuxt pode inferir,
      // como tipos literais de string
      primaryColor?: 'red' | 'blue'
    }
  }
}

// É sempre importante garantir que você importe/exports algo ao aumentar um tipo
export {}

Estratégia de Mesclagem

O Nuxt usa uma estratégia de mesclagem personalizada para o AppConfig dentro das camadas de sua aplicação.

Esta estratégia é implementada usando um Function Merger, que permite definir uma estratégia de mesclagem personalizada para cada chave em app.config que tem um array como valor.

Aqui está um exemplo de como você pode usar:

export default defineAppConfig({
  // Valor padrão do array
  array: ['hello'],
})

Limitações Conhecidas

A partir do Nuxt v3.3, o arquivo app.config.ts é compartilhado com o Nitro, o que resulta nas seguintes limitações:

1. Você não pode importar componentes Vue diretamente em app.config.ts.
2. Algumas importações automáticas não estão disponíveis no contexto do Nitro.

Essas limitações ocorrem porque o Nitro processa a configuração do aplicativo sem suporte completo para componentes Vue.

Embora seja possível usar plugins Vite na configuração do Nitro como uma solução alternativa, essa abordagem não é recomendada:

export default defineNuxtConfig({
  nitro: {
    vite: {
      plugins: [vue()]
    }
  }
})

Problemas relacionados:

• Issue #19858
• Issue #19854