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>
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,
},
})