Expondo

Para expor configurações e variáveis de ambiente para o restante de sua aplicação, você precisará definir a configuração em tempo de execução no seu arquivo nuxt.config, usando a opção runtimeConfig.

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 serão expostas para o lado do cliente
    public: {
      apiBase: '/api'
    }
  }
})

Ao adicionar apiBase ao runtimeConfig.public, o Nuxt o adiciona a cada carga de página. Podemos acessar apiBase universalmente tanto no servidor quanto no navegador.

const runtimeConfig = useRuntimeConfig()

console.log(runtimeConfig.apiSecret)
console.log(runtimeConfig.public.apiBase)

Serialização

Sua configuração em tempo de execução será serializada antes de ser passada para o Nitro. Isso significa que qualquer coisa que não possa ser serializada e depois desserializada (como funções, Sets, Maps, etc.), não deve ser definida no seu nuxt.config.

Em vez de passar objetos ou funções não serializáveis para sua aplicação a partir do seu nuxt.config, você pode colocar esse código em um plugin ou middleware do Nuxt ou Nitro.

Variáveis de Ambiente

A maneira mais comum de fornecer configuração é usando Variáveis de Ambiente.

Os valores de configuração em tempo de execução são automaticamente substituídos por variáveis de ambiente correspondentes em tempo de execução.

Existem dois requisitos principais:

1. Suas variáveis desejadas devem ser definidas no seu nuxt.config. Isso garante que variáveis de ambiente arbitrárias não sejam expostas ao código da sua aplicação.

2. Apenas uma variável de ambiente especialmente nomeada pode substituir uma propriedade de configuração em tempo de execução. Ou seja, uma variável de ambiente em maiúsculas começando com NUXT_ que usa _ para separar chaves e mudanças de caso.

Exemplo

NUXT_API_SECRET=api_secret_token
NUXT_PUBLIC_API_BASE=https://nuxtjs.org

export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: '', // pode ser substituído pela variável de ambiente NUXT_API_SECRET
    public: {
      apiBase: '', // pode ser substituído pela variável de ambiente NUXT_PUBLIC_API_BASE
    }
  },
})

Leitura

Aplicação Vue

Dentro da parte Vue da sua aplicação Nuxt, você precisará chamar useRuntimeConfig() para acessar a configuração em tempo de execução.

<script setup lang="ts">
const config = useRuntimeConfig()

console.log('Configuração em tempo de execução:', config)
if (import.meta.server) {
  console.log('Segredo da API:', config.apiSecret)
}
</script>

<template>
  <div>
    <div>Verifique o console do desenvolvedor!</div>
  </div>
</template>

Plugins

Se você quiser usar a configuração em tempo de execução dentro de qualquer plugin (personalizado), você pode usar useRuntimeConfig() dentro da sua função defineNuxtPlugin.

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig()

  console.log('URL base da API:', config.public.apiBase)
});

Rotas do Servidor

Você também pode acessar a configuração em tempo de execução dentro das rotas do servidor usando useRuntimeConfig.

export default defineEventHandler(async (event) => {
  const { apiSecret } = useRuntimeConfig(event)
  const result = await $fetch('https://my.api.com/test', {
    headers: {
      Authorization: `Bearer ${apiSecret}`
    }
  })
  return result
})

Tipagem da Configuração em Tempo de Execução

O Nuxt tenta gerar automaticamente uma interface typescript a partir da configuração em tempo de execução fornecida usando unjs/untyped.

Mas também é possível tipar sua configuração em tempo de execução manualmente:

declare module 'nuxt/schema' {
  interface RuntimeConfig {
    apiSecret: string
  }
  interface PublicRuntimeConfig {
    apiBase: string
  }
}
// É sempre importante garantir que você importe/exports algo ao aumentar um tipo
export {}