Uso

const config = useRuntimeConfig()

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

Definir Configuración en Tiempo de Ejecución

El siguiente ejemplo muestra cómo establecer una URL base de API pública y un token de API secreto que solo es accesible en el servidor.

Siempre debemos definir las variables runtimeConfig dentro de nuxt.config.

export default defineNuxtConfig({
  runtimeConfig: {
    // Las claves privadas solo están disponibles en el servidor
    apiSecret: '123',

    // Claves públicas que se exponen al cliente
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
    }
  }
})

Acceder a la Configuración en Tiempo de Ejecución

Para acceder a la configuración en tiempo de ejecución, podemos usar el composable useRuntimeConfig():

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

  // Acceder a variables públicas
  const result = await $fetch(`/test`, {
    baseURL: config.public.apiBase,
    headers: {
      // Acceder a una variable privada (solo disponible en el servidor)
      Authorization: `Bearer ${config.apiSecret}`
    }
  })
  return result
}

En este ejemplo, dado que apiBase está definido dentro del espacio de nombres public, es accesible universalmente tanto en el lado del servidor como en el del cliente, mientras que apiSecret solo es accesible en el lado del servidor.

Variables de Entorno

Es posible actualizar los valores de configuración en tiempo de ejecución utilizando un nombre de variable de entorno coincidente con el prefijo NUXT_.

Usando el Archivo .env

Podemos establecer las variables de entorno dentro del archivo .env para hacerlas accesibles durante el desarrollo y la construcción/generación.

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

Espacio de Nombres app

Nuxt utiliza el espacio de nombres app en la configuración en tiempo de ejecución con claves que incluyen baseURL y cdnURL. Puedes personalizar sus valores en tiempo de ejecución configurando variables de entorno.

app.baseURL

Por defecto, el baseURL está configurado como '/'.

Sin embargo, el baseURL puede actualizarse en tiempo de ejecución configurando NUXT_APP_BASE_URL como una variable de entorno.

Luego, puedes acceder a esta nueva base URL usando config.app.baseURL:

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

  // Acceder a baseURL universalmente
  const baseURL = config.app.baseURL
})

app.cdnURL

Este ejemplo muestra cómo establecer una URL de CDN personalizada y acceder a ella usando useRuntimeConfig().

Puedes usar un CDN personalizado para servir activos estáticos dentro de .output/public usando la variable de entorno NUXT_APP_CDN_URL.

Y luego acceder a la nueva URL de CDN usando config.app.cdnURL.

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

  // Acceder a cdnURL universalmente
  const cdnURL = config.app.cdnURL
})