Uso

const config = useRuntimeConfig()

export default defineEventHandler((event) => {
  const config = useRuntimeConfig(event)
})

Definir Configuração em Tempo de Execução

O exemplo abaixo mostra como definir uma URL base de API pública e um token de API secreto que é acessível apenas no servidor.

Devemos sempre definir variáveis runtimeConfig dentro de nuxt.config.

export default defineNuxtConfig({
  runtimeConfig: {
    // Chaves privadas estão disponíveis apenas no servidor
    apiSecret: '123',

    // Chaves públicas que são expostas ao cliente
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
    }
  }
})

Acessar Configuração em Tempo de Execução

Para acessar a configuração em tempo de execução, podemos usar o composable useRuntimeConfig():

export default defineEventHandler((event) => {
  const config = useRuntimeConfig(event)

  // Acessar variáveis públicas
  const result = await $fetch(`/test`, {
    baseURL: config.public.apiBase,
    headers: {
      // Acessar uma variável privada (disponível apenas no servidor)
      Authorization: `Bearer ${config.apiSecret}`
    }
  })
  return result
}

Neste exemplo, como apiBase é definido dentro do namespace public, ele é universalmente acessível tanto no lado do servidor quanto no lado do cliente, enquanto apiSecret é acessível apenas no lado do servidor.

Variáveis de Ambiente

É possível atualizar os valores de configuração em tempo de execução usando um nome de variável de ambiente correspondente prefixado com NUXT_.

Usando o Arquivo .env

Podemos definir as variáveis de ambiente dentro do arquivo .env para torná-las acessíveis durante o desenvolvimento e build/generate.

NUXT_PUBLIC_API_BASE = "https://api.localhost:5555"
NUXT_API_SECRET = "123"

Namespace app

O Nuxt usa o namespace app na configuração em tempo de execução com chaves incluindo baseURL e cdnURL. Você pode personalizar seus valores em tempo de execução definindo variáveis de ambiente.

app.baseURL

Por padrão, o baseURL é definido como '/'.

No entanto, o baseURL pode ser atualizado em tempo de execução definindo o NUXT_APP_BASE_URL como uma variável de ambiente.

Então, você pode acessar este novo base URL usando config.app.baseURL:

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

  // Acessar baseURL universalmente
  const baseURL = config.app.baseURL
})

app.cdnURL

Este exemplo mostra como definir uma URL de CDN personalizada e acessá-la usando useRuntimeConfig().

Você pode usar um CDN personalizado para servir ativos estáticos dentro de .output/public usando a variável de ambiente NUXT_APP_CDN_URL.

E então acessar a nova URL do CDN usando config.app.cdnURL.

export default defineEventHandler((event) => {
  const config = useRuntimeConfig(event)

  // Acessar cdnURL universalmente
  const cdnURL = config.app.cdnURL
})