Nuxt/docs/content/2.guide/2.directory-structure/3.app.config.md

icon	title	head.title
IconFile	app.config.ts	Nuxt App Config

App Config File

Nuxt 3 provides an app.config config file to expose reactive configuration within your application with the ability to update it at runtime within lifecycle or using a nuxt plugin and editing it with HMR (hot-module-replacement).

You can easily provide runtime app configuration using app.config.ts file. It can have either of .ts, .js, or .mjs extensions.

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

::alert{type=warning} Do not put any secret values inside app.config file. It is exposed to the user client bundle. ::

Defining App Config

To expose config and environment variables to the rest of your app, you will need to define configuration in app.config file.

Example:

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

When adding theme to the app.config, Nuxt uses Vite or Webpack to bundle the code. We can universally access theme in both server and browser using useAppConfig composable.

const appConfig = useAppConfig()

console.log(appConfig.theme)

Manually Typing App Config

Nuxt tries to automatically generate a typescript interface from provided app config.

It is also possible to type app config manually:

declare module '@nuxt/schema' {
  interface AppConfigInput {
    /** Theme configuration */
    theme?: {
      /** Primary app color */
      primaryColor?: string
    }
  }
}

// It is always important to ensure you import/export something when augmenting a type
export {}