Por padrão, o Nuxt é configurado para cobrir a maioria dos casos de uso. O arquivo nuxt.config.ts pode substituir ou estender essa configuração padrão.

Configuração do Nuxt

O arquivo nuxt.config.ts está localizado na raiz de um projeto Nuxt e pode substituir ou estender o comportamento da aplicação.

Um arquivo de configuração mínimo exporta a função defineNuxtConfig contendo um objeto com sua configuração. O auxiliar defineNuxtConfig está disponível globalmente sem importação.

export default defineNuxtConfig({
  // Minha configuração do Nuxt
})

Este arquivo será frequentemente mencionado na documentação, por exemplo, para adicionar scripts personalizados, registrar módulos ou alterar modos de renderização.

Substituições de Ambiente

Você pode configurar substituições totalmente tipadas por ambiente no seu nuxt.config.

export default defineNuxtConfig({
  $production: {
    routeRules: {
      '/**': { isr: true }
    }
  },
  $development: {
    //
  },
  $env: {
    staging: {
      // 
    }
  },
})

Para selecionar um ambiente ao executar um comando CLI do Nuxt, basta passar o nome para a flag --envName, assim: nuxt build --envName staging.

Para saber mais sobre o mecanismo por trás dessas substituições, consulte a documentação do c12 sobre configuração específica de ambiente.

Variáveis de Ambiente e Tokens Privados

A API runtimeConfig expõe valores como variáveis de ambiente para o restante da sua aplicação. Por padrão, essas chaves estão disponíveis apenas no lado do servidor. As chaves dentro de runtimeConfig.public e runtimeConfig.app (que é usado internamente pelo Nuxt) também estão disponíveis no lado do cliente.

Esses valores devem ser definidos no nuxt.config e podem ser substituídos usando variáveis de ambiente.

export default defineNuxtConfig({
  runtimeConfig: {
    // As chaves privadas que estão disponíveis apenas no lado do servidor
    apiSecret: '123',
    // Chaves dentro de public também são expostas no lado do cliente
    public: {
      apiBase: '/api'
    }
  }
})

Essas variáveis são expostas ao restante da sua aplicação usando o composable useRuntimeConfig().

const runtimeConfig = useRuntimeConfig()

Configuração do App

O arquivo app.config.ts, localizado no diretório de origem (por padrão, a raiz do projeto), é usado para expor variáveis públicas que podem ser determinadas no momento da construção. Ao contrário da opção runtimeConfig, estas não podem ser substituídas usando variáveis de ambiente.

Um arquivo de configuração mínimo exporta a função defineAppConfig contendo um objeto com sua configuração. O auxiliar defineAppConfig está disponível globalmente sem importação.

export default defineAppConfig({
  title: 'Hello Nuxt',
  theme: {
    dark: true,
    colors: {
      primary: '#ff0000'
    }
  }
})

Essas variáveis são expostas ao restante da sua aplicação usando o composable useAppConfig.

const appConfig = useAppConfig()

runtimeConfig vs. app.config

Como mencionado acima, runtimeConfig e app.config são usados para expor variáveis ao restante da sua aplicação. Para determinar qual deles você deve usar, aqui estão algumas diretrizes:

• runtimeConfig: Tokens privados ou públicos que precisam ser especificados após a construção usando variáveis de ambiente.
• app.config: Tokens públicos que são determinados no momento da construção, configuração do site como variante de tema, título e qualquer configuração de projeto que não seja sensível.

Arquivos de Configuração Externos

O Nuxt usa o arquivo nuxt.config.ts como a única fonte de verdade para configurações e ignora a leitura de arquivos de configuração externos. Durante o curso de construção do seu projeto, você pode precisar configurá-los. A tabela a seguir destaca configurações comuns e, quando aplicável, como elas podem ser configuradas com o Nuxt.

Aqui está uma lista de outros arquivos de configuração comuns:

Configuração do Vue

Com Vite

Se você precisar passar opções para @vitejs/plugin-vue ou @vitejs/plugin-vue-jsx, pode fazer isso no seu arquivo nuxt.config.

• vite.vue para @vitejs/plugin-vue. Verifique opções disponíveis.
• vite.vueJsx para @vitejs/plugin-vue-jsx. Verifique opções disponíveis.

export default defineNuxtConfig({
  vite: {
    vue: {
      customElement: true
    },
    vueJsx: {
      mergeProps: true
    }
  }
})

Com webpack

Se você usar webpack e precisar configurar o vue-loader, pode fazer isso usando a chave webpack.loaders.vue dentro do seu arquivo nuxt.config. As opções disponíveis estão definidas aqui.

export default defineNuxtConfig({
  webpack: {
    loaders: {
      vue: {
        hotReload: true,
      }
    }
  }
})

Habilitando Recursos Experimentais do Vue

Você pode precisar habilitar recursos experimentais no Vue, como propsDestructure. O Nuxt fornece uma maneira fácil de fazer isso no nuxt.config.ts, independentemente do construtor que você está usando:

export default defineNuxtConfig({
  vue: {
    propsDestructure: true
  }
})

migração experimental reactivityTransform do Vue 3.4 e Nuxt 3.9

Desde o Nuxt 3.9 e Vue 3.4, reactivityTransform foi movido do Vue para o Vue Macros, que tem uma integração com o Nuxt.