Exposición

Para exponer configuraciones y variables de entorno al resto de tu aplicación, necesitarás definir la configuración en tiempo de ejecución en tu archivo nuxt.config, utilizando la opción runtimeConfig.

export default defineNuxtConfig({
  runtimeConfig: {
    // Las claves privadas que solo están disponibles en el lado del servidor
    apiSecret: '123',
    // Las claves dentro de public también estarán expuestas al lado del cliente
    public: {
      apiBase: '/api'
    }
  }
})

Al agregar apiBase a runtimeConfig.public, Nuxt lo añade a cada carga útil de la página. Podemos acceder universalmente a apiBase tanto en el servidor como en el navegador.

const runtimeConfig = useRuntimeConfig()

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

Serialización

Tu configuración en tiempo de ejecución será serializada antes de ser pasada a Nitro. Esto significa que cualquier cosa que no pueda ser serializada y luego deserializada (como funciones, Sets, Maps, etc.), no debe establecerse en tu nuxt.config.

En lugar de pasar objetos o funciones no serializables a tu aplicación desde tu nuxt.config, puedes colocar este código en un plugin o middleware de Nuxt o Nitro.

Variables de Entorno

La forma más común de proporcionar configuración es utilizando Variables de Entorno.

Los valores de configuración en tiempo de ejecución son automáticamente reemplazados por variables de entorno coincidentes en tiempo de ejecución.

Hay dos requisitos clave:

1. Tus variables deseadas deben estar definidas en tu nuxt.config. Esto asegura que las variables de entorno arbitrarias no se expongan a tu código de aplicación.

2. Solo una variable de entorno con un nombre especial puede sobrescribir una propiedad de configuración en tiempo de ejecución. Es decir, una variable de entorno en mayúsculas que comience con NUXT_ y que use _ para separar claves y cambios de caso.

Ejemplo

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

export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: '', // puede ser sobrescrito por la variable de entorno NUXT_API_SECRET
    public: {
      apiBase: '', // puede ser sobrescrito por la variable de entorno NUXT_PUBLIC_API_BASE
    }
  },
})

Lectura

Aplicación Vue

Dentro de la parte Vue de tu aplicación Nuxt, necesitarás llamar a useRuntimeConfig() para acceder a la configuración en tiempo de ejecución.

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

console.log('Configuración en tiempo de ejecución:', config)
if (import.meta.server) {
  console.log('Secreto de API:', config.apiSecret)
}
</script>

<template>
  <div>
    <div>¡Revisa la consola del desarrollador!</div>
  </div>
</template>

Plugins

Si deseas usar la configuración en tiempo de ejecución dentro de cualquier plugin (personalizado), puedes usar useRuntimeConfig() dentro de tu función defineNuxtPlugin.

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

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

Rutas del Servidor

También puedes acceder a la configuración en tiempo de ejecución dentro de las rutas del 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
})

Tipado de Configuración en Tiempo de Ejecución

Nuxt intenta generar automáticamente una interfaz de TypeScript a partir de la configuración en tiempo de ejecución proporcionada usando unjs/untyped.

Pero también es posible tipar tu configuración en tiempo de ejecución manualmente:

declare module 'nuxt/schema' {
  interface RuntimeConfig {
    apiSecret: string
  }
  interface PublicRuntimeConfig {
    apiBase: string
  }
}
// Siempre es importante asegurarse de importar/exportar algo al aumentar un tipo
export {}