Efficlose

Deployment

Learn how to deploy your application to production.

Overview

This template can be deployed to various hosting platforms. Choose the one that best fits your needs.

Vercel

Quick Deploy

The easiest way to deploy is using Vercel:

Manual Deployment

  1. Install Vercel CLI:
npm install -g vercel
  1. Deploy:
vercel
  1. Follow the prompts to configure your deployment.

Configuration

Create a vercel.json file:

{
  "buildCommand": "npm run build",
  "outputDirectory": ".output/public",
  "framework": "nuxtjs"
}

Netlify

Deploy via Git

  1. Push your code to GitHub, GitLab, or Bitbucket
  2. Connect your repository to Netlify
  3. Configure build settings:
    • Build command: npm run build
    • Publish directory: .output/public

Netlify CLI

# Install Netlify CLI
npm install -g netlify-cli

# Deploy
netlify deploy --prod

Configuration

Create a netlify.toml file:

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

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Cloudflare Pages

Deploy via Git

  1. Connect your Git repository to Cloudflare Pages
  2. Configure build settings:
    • Build command: npm run build
    • Build output directory: .output/public
    • Environment variables: Set NODE_VERSION to 18 or higher

Wrangler CLI

# Install Wrangler
npm install -g wrangler

# Deploy
wrangler pages deploy .output/public

Docker

Dockerfile

Create a Dockerfile:

FROM node:18-alpine

WORKDIR /app

# Copy package files
COPY package*.json ./

# Install dependencies
RUN npm ci

# Copy source code
COPY . .

# Build application
RUN npm run build

# Expose port
EXPOSE 3000

# Start application
CMD ["node", ".output/server/index.mjs"]

Build and Run

# Build image
docker build -t my-app .

# Run container
docker run -p 3000:3000 my-app

Docker Compose

Create a docker-compose.yml:

version: '3.8'

services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
    restart: unless-stopped

Static Hosting

Generate Static Site

npm run generate

This creates a .output/public directory with static files.

Deploy to Static Hosts

Upload the .output/public directory to:

  • GitHub Pages
  • AWS S3
  • Google Cloud Storage
  • Azure Static Web Apps

Environment Variables

Setting Variables

Create a .env file:

NUXT_PUBLIC_API_URL=https://api.example.com
DATABASE_URL=postgresql://...

Platform-Specific

Vercel:

vercel env add NUXT_PUBLIC_API_URL

Netlify:

netlify env:set NUXT_PUBLIC_API_URL "https://api.example.com"

Cloudflare: Set in the Pages dashboard under Settings > Environment variables

Performance Optimization

Build Optimization

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ['/']
    },
    compressPublicAssets: true
  }
})

CDN Configuration

Use a CDN for static assets:

export default defineNuxtConfig({
  app: {
    cdnURL: 'https://cdn.example.com'
  }
})

Monitoring

Error Tracking

Install Sentry:

npm install @sentry/nuxt

Configure in nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@sentry/nuxt/module'],
  sentry: {
    dsn: process.env.SENTRY_DSN
  }
})

Analytics

Add analytics in app.vue:

<script setup lang="ts">
useHead({
  script: [
    {
      src: 'https://analytics.example.com/script.js',
      defer: true
    }
  ]
})
</script>

CI/CD

GitHub Actions

Create .github/workflows/deploy.yml:

name: Deploy

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          
      - name: Install dependencies
        run: npm ci
        
      - name: Build
        run: npm run build
        
      - name: Deploy
        run: npm run deploy
        env:
          DEPLOY_TOKEN: ${{ secrets.DEPLOY_TOKEN }}

Troubleshooting

Build Failures

Check Node.js version:

node --version  # Should be 18 or higher

Clear cache and rebuild:

rm -rf node_modules .nuxt
npm install
npm run build

Runtime Errors

Enable debug mode:

DEBUG=nuxt:* npm run dev

Check server logs in your hosting platform's dashboard.

Best Practices

Always test your build locally before deploying: npm run build && npm run preview
Never commit .env files to version control. Use platform-specific environment variable management.
Enable automatic deployments from your main branch for continuous deployment.

API Reference

Complete API reference for composables and utilities.

Advanced Topics

Advanced features and techniques for power users.