app.config.ts

Defines build-time, reactive, public app configuration via defineAppConfig.

Since Nuxt 3.0 Spec ↗

Syntax

export default defineAppConfig({ ... })

Parameters

NameTypeRequiredDescription
config AppConfig Yes Any serializable configuration object (theming, feature flags, UI defaults). No secrets.

Returns

AppConfig — Read at runtime via useAppConfig().

Examples

// app.config.ts
export default defineAppConfig({
  title: 'My App',
  theme: {
    primary: '#3b82f6',
    radius: 8,
  },
})
<script setup lang="ts">
const { theme } = useAppConfig()
</script>

<template>
  <div :style="{ color: theme.primary }">Hello</div>
</template>

Notes

Differs from `runtimeConfig`: `app.config` is bundled at build time (cannot be changed by env vars) and is fully reactive and public. Ideal for theming and feature toggles. Modules can provide and merge defaults into it. Never store secrets here.

See also