Deploying Nuxt Applications

From Development to Production

Nuxt is flexible and can be deployed to various platforms. Understanding build modes and deployment options is crucial.

Build Modes

SSR (Server-Side Rendering)

Default mode - renders on the server:

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true // default
})

Best for: SEO-critical sites, dynamic content

SSG (Static Site Generation)

Pre-renders all pages at build time:

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true,
  nitro: {
    preset: 'static'
  }
})

Best for: Blogs, documentation, marketing sites

SPA (Single Page Application)

Client-side only:

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: false
})

Best for: Apps behind authentication, dashboards

Nitro Presets

Nuxt uses Nitro for server deployment. Choose a preset:

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    preset: 'vercel' // or 'netlify', 'cloudflare', 'node-server', etc.
  }
})

Popular presets:

• node-server - Standard Node.js server
• vercel - Vercel platform
• netlify - Netlify platform
• cloudflare-pages - Cloudflare Pages
• aws-lambda - AWS Lambda
• azure - Azure Functions

Environment Configuration

Use environment variables for different environments:

# .env.production
NUXT_PUBLIC_API_BASE=https://api.production.com
API_SECRET=prod-secret-key

# .env.staging
NUXT_PUBLIC_API_BASE=https://api.staging.com
API_SECRET=staging-secret-key

Deployment Checklist

Before Deployment

• ✅ Set appropriate build mode (SSR/SSG/SPA)
• ✅ Configure environment variables
• ✅ Set up error tracking (Sentry, etc.)
• ✅ Configure analytics
• ✅ Test in production mode locally
• ✅ Run linter and tests
• ✅ Optimize images and assets
• ✅ Configure caching headers

Platform-Specific Steps

Vercel:

npm run build
# Vercel auto-detects Nuxt

Netlify:

npm run build
# netlify.toml
[build]
  command = "npm run build"
  publish = ".output/public"

Docker:

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
ENV NUXT_HOST=0.0.0.0
ENV NUXT_PORT=3000
CMD ["node", ".output/server/index.mjs"]

Performance After Deployment

1. Enable compression (gzip/brotli)
2. Set up CDN for static assets
3. Configure caching headers
4. Enable HTTP/2
5. Use serverless functions for API routes
6. Monitor performance metrics

Monitoring

// plugins/monitoring.client.ts
export default defineNuxtPlugin(() => {
  // Set up error tracking
  window.addEventListener('error', (event) => {
    // Send to your error tracking service
    console.error('Error:', event.error)
  })
})

Deployment is where your hard work goes live. Choose the right mode and platform for your needs, configure properly, and monitor after launch. Happy deploying!