Files
agent-skills/skills/nuxt/references/core-config.md
Jason Woltje f5792c40be feat: Complete fleet — 94 skills across 10+ domains
Pulled ALL skills from 15 source repositories:
- anthropics/skills: 16 (docs, design, MCP, testing)
- obra/superpowers: 14 (TDD, debugging, agents, planning)
- coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth)
- better-auth/skills: 5 (auth patterns)
- vercel-labs/agent-skills: 5 (React, design, Vercel)
- antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo)
- Plus 13 individual skills from various repos

Mosaic Stack is not limited to coding — the Orchestrator and
subagents serve coding, business, design, marketing, writing,
logistics, analysis, and more.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-16 16:27:42 -06:00

3.1 KiB

name, description
name description
configuration Nuxt configuration files including nuxt.config.ts, app.config.ts, and runtime configuration

Nuxt Configuration

Nuxt uses configuration files to customize application behavior. The main configuration options are nuxt.config.ts for build-time settings and app.config.ts for runtime settings.

nuxt.config.ts

The main configuration file at the root of your project:

// nuxt.config.ts
export default defineNuxtConfig({
  // Configuration options
  devtools: { enabled: true },
  modules: ['@nuxt/ui'],
})

Environment Overrides

Configure environment-specific settings:

export default defineNuxtConfig({
  $production: {
    routeRules: {
      '/**': { isr: true },
    },
  },
  $development: {
    // Development-specific config
  },
  $env: {
    staging: {
      // Staging environment config
    },
  },
})

Use --envName flag to select environment: nuxt build --envName staging

Runtime Config

For values that need to be overridden via environment variables:

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    // Server-only keys
    apiSecret: '123',
    // Keys within public are exposed to client
    public: {
      apiBase: '/api',
    },
  },
})

Override with environment variables:

# .env
NUXT_API_SECRET=api_secret_token
NUXT_PUBLIC_API_BASE=https://api.example.com

Access in components/composables:

<script setup lang="ts">
const config = useRuntimeConfig()
// Server: config.apiSecret, config.public.apiBase
// Client: config.public.apiBase only
</script>

App Config

For public tokens determined at build time (not overridable via env vars):

// app/app.config.ts
export default defineAppConfig({
  title: 'Hello Nuxt',
  theme: {
    dark: true,
    colors: {
      primary: '#ff0000',
    },
  },
})

Access in components:

<script setup lang="ts">
const appConfig = useAppConfig()
</script>

runtimeConfig vs app.config

Feature runtimeConfig app.config
Client-side Hydrated Bundled
Environment variables Yes No
Reactive Yes Yes
Hot module replacement No Yes
Non-primitive JS types No Yes

Use runtimeConfig for secrets and values that change per environment. Use app.config for public tokens, theme settings, and non-sensitive config.

External Tool Configuration

Nuxt uses nuxt.config.ts as single source of truth. Configure external tools within it:

export default defineNuxtConfig({
  // Nitro configuration
  nitro: {
    // nitro options
  },
  // Vite configuration
  vite: {
    // vite options
    vue: {
      // @vitejs/plugin-vue options
    },
  },
  // PostCSS configuration
  postcss: {
    // postcss options
  },
})

Vue Configuration

Enable Vue experimental features:

export default defineNuxtConfig({
  vue: {
    propsDestructure: true,
  },
})