How to Deploy a Nuxt.js Application

How to Deploy a Nuxt.js Application

Nuxt.js is the Vue.js equivalent of Next.js — a powerful framework for building server-side rendered, statically generated, or hybrid applications with Vue. It provides automatic routing, middleware support, server-side rendering, and an excellent developer experience. This guide covers deploying a Nuxt 3 application on your Breeze instance.

Prerequisites

• A Breeze instance with Ubuntu 22.04 or later
• Node.js 18+ and npm installed
• Nginx installed for reverse proxy
• PM2 for process management
• A domain name pointed to your Breeze IP

Step 1 — Install Node.js and PM2

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs
sudo npm install -g pm2

Step 2 — Create or Clone Your Nuxt Application

Start a new Nuxt 3 project:

npx nuxi@latest init my-nuxt-app
cd my-nuxt-app
npm install

Or clone an existing project:

git clone https://github.com/yourusername/your-nuxt-app.git
cd your-nuxt-app
npm ci

Step 3 — Configure for Production

Edit nuxt.config.ts to set production-specific options:

export default defineNuxtConfig({
  devtools: { enabled: false },
  nitro: {
    preset: 'node-server'
  },
  runtimeConfig: {
    apiSecret: process.env.API_SECRET,
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
    }
  }
})

Step 4 — Build the Application

For server-side rendering (SSR):

npm run build

For a fully static site (SSG):

npm run generate

The SSR build outputs to .output/, while the static generation outputs to .output/public/.

Step 5 — Deploy with PM2 (SSR Mode)

For SSR deployments, run the built server with PM2:

pm2 start .output/server/index.mjs --name "nuxt-app"
pm2 save
pm2 startup

The Nuxt server runs on port 3000 by default. You can change this with the PORT environment variable.

Step 6 — Configure Nginx Reverse Proxy

sudo nano /etc/nginx/sites-available/nuxtjs

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }

    location /_nuxt/ {
        alias /home/user/my-nuxt-app/.output/public/_nuxt/;
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

sudo ln -s /etc/nginx/sites-available/nuxtjs /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl reload nginx

Static Deployment Alternative

If using SSG mode (no server-side rendering needed), simply serve the generated files directly from Nginx:

sudo rsync -avz --delete .output/public/ /var/www/nuxt-static/

Then point Nginx directly to /var/www/nuxt-static/ as the document root.

Environment Variables

Set runtime environment variables in a .env file or pass them to PM2:

pm2 start .output/server/index.mjs --name "nuxt-app" \
    --env production \
    -- --port 3000

Remember to secure your deployment with an SSL certificate:

sudo certbot --nginx -d yourdomain.com