Vercel

Vercel, created by the makers of Next.js, provides exceptional performance and developer experience. Particularly well-suited for Nuxt applications with zero-configuration deployments.

Vercel Configuration

While Vercel works with zero configuration, you can create vercel.json to customize:

{
  "buildCommand": "npm run generate",
  "outputDirectory": ".output/public",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  "framework": "nuxtjs",
  "regions": ["iad1"],
  "headers": [
    {
      "source": "/_nuxt/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

Deployment Methods

Git Integration

1. Go to vercel.com and sign up
2. Click Add New > Project
3. Import your repository from GitHub, GitLab, or Bitbucket
4. Vercel auto-detects Nuxt and configures settings
5. Click Deploy

Pushes to main trigger automatic builds. Pull requests get preview deployments.

CLI Deployment

# Install Vercel CLI
npm install -g vercel

# Deploy (follow prompts)
vercel

# Deploy to production
vercel --prod

Each deployment gets a unique preview URL, with one marked as production.

Environment Variables

Set in Settings > Environment Variables:

NUXT_APP_BASE_URL=/
NUXT_PUBLIC_SITE_URL=https://docs.example.com

Or via CLI:

vercel env add NUXT_PUBLIC_SITE_URL production

Custom Domain

1. Go to Settings > Domains
2. Add your domain
3. Configure DNS:
   • Vercel provides the required DNS records
   • Automatic SSL provisioning

Regions

Deploy to specific regions for lower latency:

{
  "regions": ["iad1", "sfo1", "cdg1"]
}

Available regions:

• iad1 - US East (Washington, D.C.)
• sfo1 - US West (San Francisco)
• cdg1 - Europe (Paris)
• hnd1 - Asia (Tokyo)

Advanced Features

Analytics

Enable Web Analytics in Settings > Analytics for:

• Real-time page views
• Visitor paths
• Performance metrics
• 404 tracking

Speed Insights

Monitor Core Web Vitals:

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)

Image Optimization

Vercel provides dynamic image optimization:

<template>
  <NuxtImg
    src="/image.png"
    provider="vercel"
    width="800"
    quality="80"
  />
</template>

Edge Functions

Run code at the CDN edge:

// api/hello.ts
export const config = { runtime: 'edge' }

export default function handler(request: Request) {
  return new Response('Hello from the edge!')
}

Troubleshooting

Build Failures

Check Deployments for logs. Common issues:

• Framework detection (set framework: "nuxtjs" in vercel.json)
• Missing build command (default is npm run build, but we need npm run generate)
• Environment variables not available at build time

Preview vs Production

• Preview deployments: Every push to non-main branches
• Production: Pushes to main branch only

Configure in Settings > Git > Production Branch.

404 on Direct Navigation

For static generation, ensure routes are pre-rendered. Check nuxt.config.ts:

export default defineNuxtConfig({
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ['/']
    }
  }
})