Nuxt proporciona un archivo de configuración app.config para exponer configuración reactiva dentro de su aplicación con la capacidad de actualizarla en tiempo de ejecución dentro del ciclo de vida o usando un plugin de nuxt y editándola con HMR (hot-module-replacement).

Puede proporcionar fácilmente configuración de la aplicación en tiempo de ejecución usando el archivo app.config.ts. Puede tener extensiones .ts, .js o .mjs.

export default defineAppConfig({
  foo: 'bar'
})

Uso

Para exponer la configuración y las variables de entorno al resto de su aplicación, necesitará definir la configuración en el archivo app.config.

export default defineAppConfig({
  theme: {
    primaryColor: '#ababab'
  }
})

Ahora podemos acceder universalmente a theme tanto al renderizar la página en el servidor como en el navegador usando el composable useAppConfig.

const appConfig = useAppConfig()

console.log(appConfig.theme)

La utilidad updateAppConfig se puede usar para actualizar el app.config en tiempo de ejecución.

const appConfig = useAppConfig() // { foo: 'bar' }

const newAppConfig = { foo: 'baz' }

updateAppConfig(newAppConfig)

console.log(appConfig) // { foo: 'baz' }

Tipado de App Config

Nuxt intenta generar automáticamente una interfaz TypeScript a partir de la configuración de la aplicación proporcionada para que no tenga que escribirla usted mismo.

Sin embargo, hay algunos casos en los que podría querer escribirla usted mismo. Hay dos cosas posibles que podría querer escribir.

Entrada de App Config

AppConfigInput podría ser utilizado por autores de módulos que están declarando qué opciones de entrada válidas son al configurar la app config. Esto no afectará el tipo de useAppConfig().

declare module 'nuxt/schema' {
  interface AppConfigInput {
    /** Configuración del tema */
    theme?: {
      /** Color primario de la aplicación */
      primaryColor?: string
    }
  }
}

// Siempre es importante asegurarse de importar/exportar algo al aumentar un tipo
export {}

Salida de App Config

Si desea escribir el resultado de llamar a useAppConfig(), entonces querrá extender AppConfig.

declare module 'nuxt/schema' {
  interface AppConfig {
    // Esto reemplazará completamente la propiedad `theme` inferida existente
    theme: {
      // Podría querer escribir este valor para agregar tipos más específicos de los que Nuxt puede inferir,
      // como tipos literales de cadena
      primaryColor?: 'red' | 'blue'
    }
  }
}

// Siempre es importante asegurarse de importar/exportar algo al aumentar un tipo
export {}

Estrategia de Fusión

Nuxt utiliza una estrategia de fusión personalizada para el AppConfig dentro de las capas de su aplicación.

Esta estrategia se implementa usando un Function Merger, que permite definir una estrategia de fusión personalizada para cada clave en app.config que tiene un array como valor.

Aquí hay un ejemplo de cómo puede usarlo:

export default defineAppConfig({
  // Valor de array predeterminado
  array: ['hello'],
})

Limitaciones Conocidas

A partir de Nuxt v3.3, el archivo app.config.ts se comparte con Nitro, lo que resulta en las siguientes limitaciones:

1. No puede importar componentes de Vue directamente en app.config.ts.
2. Algunas auto-importaciones no están disponibles en el contexto de Nitro.

Estas limitaciones ocurren porque Nitro procesa la configuración de la aplicación sin soporte completo para componentes de Vue.

Aunque es posible usar plugins de Vite en la configuración de Nitro como una solución alternativa, este enfoque no se recomienda:

export default defineNuxtConfig({
  nitro: {
    vite: {
      plugins: [vue()]
    }
  }
})

Problemas relacionados:

• Issue #19858
• Issue #19854