Skip to main content

Nuxt Config Generator

Build a nuxt.config.ts for your Nuxt 3 project. Select modules, configure runtime environment variables with proper public/private separation, set SEO app.head defaults, and toggle TypeScript strict mode and SSR. The generated config is copy-paste ready and follows Nuxt 3 best practices.

✓ Module selection ✓ Runtime config ✓ SEO defaults

Nuxt 3 runtimeConfig Cheat Sheet

Config key Env var name Available
runtimeConfig.dbUrl NUXT_DB_URL Server only
runtimeConfig.stripeSecret NUXT_STRIPE_SECRET Server only
runtimeConfig.public.apiBase NUXT_PUBLIC_API_BASE Client + Server
runtimeConfig.public.stripeKey NUXT_PUBLIC_STRIPE_KEY Client + Server

Hybrid Rendering with routeRules

Nuxt 3 lets you mix rendering strategies per route — no need to choose between a purely SSR or purely static site: 

{`// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // Static generation at build time
    '/': { prerender: true },

    // Incremental Static Regeneration (revalidate every 60s)
    '/blog/**': { isr: 60 },

    // SPA mode — no SSR for authenticated pages
    '/dashboard/**': { ssr: false },

    // Cache API responses at CDN edge for 10 minutes
    '/api/public/**': { cache: { maxAge: 600 } },

    // Add CORS headers to API routes
    '/api/**': { cors: true },

    // 301 redirect
    '/old-path': { redirect: '/new-path' },
  },
})`}

Essential Nuxt 3 Modules

Module Install Purpose
@nuxtjs/tailwindcss npx nuxi module add tailwindcss Tailwind CSS with auto-config
@pinia/nuxt npx nuxi module add pinia State management (Pinia)
@nuxt/image npx nuxi module add image Image optimization (WebP, lazy)
nuxt-icon npm install nuxt-icon 100,000+ icons via Iconify
@nuxtjs/color-mode npx nuxi module add color-mode Dark/light mode toggle
@nuxtjs/i18n npx nuxi module add i18n Internationalization (i18n)

nuxt.config.ts Best Practices

  • Never hardcode secrets — use environment variables via runtimeConfig
  • Keep typescript.strict: true enabled from the start — retrofitting is painful
  • Use devtools: { enabled: true } only in development — strip for production
  • Prefer npx nuxi module add <name> over manual installs — it updates config automatically
  • Add .nuxt/ and .output/ to your .gitignore
  • Set compatibilityDate to lock behavior for future Nuxt versions

Frequently Asked Questions

What is nuxt.config.ts and what can it configure?▼

nuxt.config.ts is the central configuration file for a Nuxt 3 project. It controls: which modules are loaded, SSR vs SPA mode, TypeScript strictness, runtime environment variables (runtimeConfig), SEO defaults (app.head), route rules, global CSS, Vite/Webpack build options, and module-specific configuration blocks. Everything in nuxt.config.ts is type-safe — your editor gets IntelliSense because Nuxt exports typed defineNuxtConfig().

What is the difference between public and private runtimeConfig?▼

runtimeConfig.public keys are exposed to the browser and accessible via useRuntimeConfig() on both client and server. runtimeConfig keys (outside public) are server-only — never sent to the browser. Use private keys for database URLs, API secrets, and third-party keys that must not leak. Both types read from NUXT_* environment variables at runtime: `runtimeConfig.apiBase` maps to NUXT_API_BASE, `runtimeConfig.public.siteUrl` maps to NUXT_PUBLIC_SITE_URL.

When should I use SSR vs SPA mode in Nuxt?▼

Keep `ssr: true` (the default) for marketing sites, blogs, e-commerce, and any page that needs SEO or fast initial load — the server renders HTML before sending it to the browser. Set `ssr: false` to switch to SPA (Single Page Application) mode, which skips server rendering entirely. SPA mode is appropriate for dashboards, internal tools, or apps behind authentication where SEO doesn't matter. Nuxt also supports hybrid rendering per-route via routeRules.

How do I add Nuxt modules?▼

Install the module package (e.g., `npm install @nuxtjs/tailwindcss`), then add it to the `modules` array in nuxt.config.ts. Most modules also accept a configuration key at the top level (e.g., `tailwindcss: { config: { ... } }`). Nuxt modules run at build time — they can add plugins, composables, components, and Nitro middleware. Check nuxt.com/modules for the official module catalog.

What are routeRules and how do they enable hybrid rendering?▼

routeRules let you set per-route rendering strategies. `{ '/blog/**': { isr: 60 } }` caches blog pages for 60 seconds with Incremental Static Regeneration. `{ '/dashboard/**': { ssr: false } }` disables SSR for dashboard routes (SPA behavior). `{ '/api/**': { cors: true } }` adds CORS headers to API routes. `{ '/old-page': { redirect: '/new-page' } }` handles redirects. Combine SSR, ISR, SWR, and SPA per route without multiple deployments.

How does Nuxt handle environment variables?▼

Nuxt reads .env files (using dotenv) at dev time. In production, set real environment variables on your host. All NUXT_* and NUXT_PUBLIC_* variables are automatically injected into runtimeConfig at runtime — no manual process.env reading needed. This means you can deploy the same build to different environments (staging, production) by changing environment variables. Never commit secrets to .env files; use .env.example with placeholder values instead.

Share this tool: X / Twitter LinkedIn
✓ 60,000+ developers use DevPlaybook ★★★★★ 4.8 / 5 on Gumroad ✓ MIT licensed · Instant download ✓ No login required

Related Products

on Gumroad
📘 $14

TypeScript Quick Reference Toolkit

5 practical reference files for TypeScript developers: cheatsheet, TS vs JS comparison, 20 utility types with real examples, tsconfig best practices template, and 15 common mistakes guide. Print it. Keep it on your desk.

Buy on Gumroad →
🔒 $29

DevPlaybook Interview Vault

210+ real technical interview questions with model answers, asked at Google, Meta, Amazon, Microsoft, Stripe, and Shopify. Covers Frontend (55), Backend (55), System Design (50), and DSA (50). Available in English and Traditional Chinese.

Buy on Gumroad →
🎯 $29

Developer Interview Vault

210 technical interview questions with model answers, key points, and follow-up questions. Covers Frontend, Backend, System Design, and DSA — bilingual English + Traditional Chinese (ZH-TW). PWYW from $29.

Buy on Gumroad →

You Might Also Need

SQL to TypeScript Types

Convert SQL CREATE TABLE statements to TypeScript interfaces and Zod schemas. Maps SQL column types to TypeScript with nullability.

Open free tool →

TypeScript Discriminated Union Builder

Build TypeScript discriminated unions visually. Add variants with fields and get type-safe switch statements, type guards, and exhaustive checking code.

Open free tool →

Prettier Config Generator

Generate Prettier configuration files with your formatting preferences. Supports .prettierrc JSON, prettier.config.js ESM, and .prettierrc.yaml. Set print width, tabs, quotes, trailing commas, and more.

Open free tool →

More Free Tools

SQL to TypeScript Types TypeScript Discriminated Union Builder Prettier Config Generator TypeScript Playground TypeScript to JavaScript Converter Vue Component Generator TypeScript tsconfig.json Generator JS Prototype Chain Visualizer Axios Interceptor Builder Neon DB Query Builder Code Tools JavaScript Formatter & Minifier JSON to TypeScript Interface Playwright Config Generator Vitest Configuration Generator Jest Coverage Config Generator Jest Testing Framework Guide Zustand Store Builder TanStack Query Config Builder SWR Config Generator GraphQL Client Configurator Jest Mock Generator Turso Edge DB Explorer ESLint Config Generator Interview Question Generator Regex Visualizer Regex Tester Pro Regex Tester Helm Values Generator SMTP Server Tester Biome Config Generator Haproxy Config Validator Regex Flags Explainer Sentry DSN Config Builder Bundle Size Estimator JavaScript Memory Leak Detector NPM Bundle Size Estimator Helm Values Builder Vitest Guide — Vite-native Testing Cypress Frontend Testing Guide AWS CDK Infrastructure as Code Guide Pulumi Modern IaC Guide Ansible Configuration Management Guide CORS Policy Tester JSON Schema to Zod Converter Drizzle Schema Generator Playwright Test Generator Pulumi Stack Config Generator Nomad Job Spec Builder Helm Values Validator ArgoCD Application Generator Bundle Size Impact Calculator HTTP Cache Header Builder HTML5 Canvas API Playground Game Loop Calculator Bezier Curve Editor Particle System Config Generator CrewAI Agent Config Generator Sentry DSN Configurator Jotai Atom Explorer OpenAI Function Calling Generator CORS Header Generator CSS Flexbox Visualizer React Component Generator

Related Articles

Mar 27, 2026 · 13 min read

SvelteKit vs Next.js vs Nuxt 3: The Complete Framework Comparison (2026)

Choosing between SvelteKit, Next.js, and Nuxt 3 in 2026? This in-depth comparison covers performance, developer experience, ecosystem, hosting options, and when to choose each framework.
Apr 2, 2026 · 13 min read

TypeScript Best Practices 2025: Type Safety Patterns Every Developer Should Know

Master TypeScript type safety patterns in 2025. Branded types, discriminated unions, conditional types, template literals, and type guards with practical code examples.
Mar 28, 2026 · 14 min read

SolidJS vs React 2026: Performance, DX, and When to Choose Each

Deep comparison of SolidJS and React in 2026: fine-grained reactivity vs virtual DOM, signals vs useState, performance benchmarks, SolidStart vs Next.js, and honest real-world tradeoffs.
Mar 28, 2026 · 10 min read

TypeScript 5.5 New Features: Complete Guide for Developers 2026

Everything you need to know about TypeScript 5.5: inferred type predicates, isolated declarations, JSDoc @import tag, new Set methods, and performance improvements. With practical code examples.
Mar 28, 2026 · 10 min read

Vitest vs Jest vs Mocha: Complete Testing Framework Comparison 2026

A comprehensive comparison of Vitest, Jest, and Mocha for JavaScript and TypeScript projects in 2026. Covers speed benchmarks, configuration, TypeScript support, mocking, code coverage, and migration strategies.

Enjoying this tool? Get more like it.

Weekly developer tool guides, productivity playbooks & AI tricks. Free. No spam.

DevPlaybook Pro 7 days free

Unlock AI-Powered Dev Tools

  • ⚡ AI Code Review, Doc Generator & SQL Builder
  • ⚡ All premium templates & early access
  • ⚡ Member discounts on Gumroad products
Start Free Trial →

$9/mo after trial · Cancel anytime

Want the full toolkit?

Get DevPlaybook Pro

Every template, guide, boilerplate, and automation script in one bundle. 13 premium products — grab them all at once and save big.

$79
$241 separately Save $162 (67% off)
Get DevPlaybook Pro — $79 →

MIT licensed · Instant download · No subscription

See what's included → Browse all deals →