# App Config

::StabilityEdge
::

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).

::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:**

```ts [app.config.ts]
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](/api/composables/use-app-config) composable.

```js
const appConfig = useAppConfig()

console.log(appConfig.theme)
```

<!-- TODO: Document module author for extension -->

### 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:

```ts [index.d.ts]
declare module '@nuxt/schema' {
  interface AppConfig {
    /** Theme configuration */
    theme: {
      /** Primary app color */
      primaryColor: string
    }
  }
}

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