Deploy Nuxt

This guide will help you deploy a Nuxt application to Deployxa.

Overview

Nuxt is a Vue.js framework for building full-stack web applications with server-side rendering (SSR) and static site generation (SSG). Deployxa provides optimized deployments for Nuxt with automatic configuration.

Features:

• Automatic framework detection
• Server-side rendering (SSR)
• Static site generation (SSG)
• API routes support
• Automatic HTTPS
• Global CDN

Prerequisites

• A Nuxt application (version 3 recommended)
• A GitHub repository with your code
• A Deployxa account

Quick Start

1. Create Your Nuxt App

If you don't have a Nuxt app yet:

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

2. Push to GitHub

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/yourusername/my-nuxt-app.git
git push -u origin main

3. Deploy to Deployxa

1. Go to Deployxa Dashboard
2. Click "New Project"
3. Select your GitHub repository
4. Deployxa will automatically detect Nuxt
5. Click "Deploy"

Your app will be live in under 60 seconds!

Configuration

Detected Settings

Deployxa automatically detects these settings:

Setting	Value
Framework	Nuxt
Build Command	npm run build
Output Directory	.output
Start Command	node .output/server/index.mjs
Port	3000

Custom Configuration

If you need to customize settings:

1. Go to Project → Settings → Build
2. Modify settings as needed
3. Save changes

Example Custom Settings:

{
  "buildCommand": "npm run build",
  "outputDirectory": ".output",
  "startCommand": "node .output/server/index.mjs"
}

Environment Variables

Adding Environment Variables

1. Go to Project → Environment
2. Click "Add Variable"
3. Enter key and value
4. Click "Save"

Common Nuxt Environment Variables:

NUXT_PUBLIC_API_URL=https://api.example.com
NUXT_API_SECRET=your-api-secret
DATABASE_URL=postgresql://user:pass@host:5432/db

Note: Variables prefixed with NUXT_PUBLIC_ are exposed to the client.

Using Environment Variables

In your Nuxt app:

// Server-side only
const apiUrl = useRuntimeConfig().apiUrl;

// Available on both server and client
const publicApiUrl = useRuntimeConfig().public.apiUrl;

Configure in nuxt.config.ts:

export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: '',
    public: {
      apiUrl: ''
    }
  }
})

Build Process

What Happens During Build

1. Install Dependencies: npm install or npm ci
2. Run Build: npm run build
3. Generate Server Bundle: Build server-side code
4. Generate Client Bundle: Build client-side code
5. Create Output: Generate .output directory
6. Deploy: Deploy to edge network

Build Output

Nuxt generates:

• .output/ - Build output directory
• .output/server/ - Server-side code
• .output/public/ - Static assets
• .output/server/index.mjs - Server entry point

Rendering Modes

Server-Side Rendering (SSR)

Default mode for dynamic content:

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

Benefits:

• SEO friendly
• Fast initial load
• Dynamic content

Static Site Generation (SSG)

For mostly static content:

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

Benefits:

• Fast load times
• CDN caching
• Low resource usage

Hybrid Rendering

Mix SSR and SSG:

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/blog/**': { isr: 3600 },
    '/admin/**': { ssr: false }
  }
})

API Routes

Creating API Routes

Create files in server/api/:

// server/api/hello.ts
export default defineEventHandler((event) => {
  return {
    message: 'Hello from Nuxt API!'
  }
})

Access: https://your-app.deployxa.app/api/hello

With Database

// server/api/users.get.ts
import { prisma } from '~/lib/prisma'

export default defineEventHandler(async () => {
  const users = await prisma.user.findMany()
  return users
})

POST Requests

// server/api/users.post.ts
export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  // Process body
  return { success: true }
})

Custom Domains

Adding a Custom Domain

1. Go to Project → Domains
2. Click "Add Domain"
3. Enter your domain (e.g., example.com)
4. Configure DNS records
5. Wait for verification

DNS Configuration

For Apex Domain (example.com):

Type: A
Name: @
Value: 76.76.21.21

For Subdomain (www.example.com):

Type: CNAME
Name: www
Value: cname.deployxa.com

Performance Optimization

Enable Nitro Compression

Nuxt uses Nitro which automatically enables compression.

Enable Caching

Configure caching in nuxt.config.ts:

export default defineNuxtConfig({
  routeRules: {
    '/api/**': { cors: true },
    '/blog/**': { isr: 3600 }
  }
})

Optimize Images

Use Nuxt Image:

npm install @nuxt/image

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/image']
})

<NuxtImg src="/image.jpg" width="500" height="500" />

Code Splitting

Nuxt automatically code-splits by default.

Monitoring

Viewing Logs

1. Go to Project → Logs
2. Select log type:
   • Build Logs: Deployment process
   • Runtime Logs: Application output
   • Error Logs: Application errors

Monitoring Metrics

1. Go to Project → Analytics
2. View metrics:
   • Request count
   • Response times
   • Error rates
   • Bandwidth usage
   • CPU/RAM usage

Health Checks

Deployxa automatically monitors your application:

• HTTP health checks every 30 seconds
• Automatic restart on failure
• Alerts on consecutive failures

Troubleshooting

Build Failed: Module Not Found

Problem: Module not found: Can't resolve 'package-name'

Solution:

1. Check package.json has the dependency
2. Run npm install package-name locally
3. Commit and push changes
4. Redeploy

Runtime Error: Port Already in Use

Problem: Error: listen EADDRINUSE: address already in use :::3000

Solution:

• Deployxa automatically handles port configuration
• Ensure your code uses process.env.PORT or defaults to 3000

Pages Not Loading

Problem: Pages return 404 or blank

Solution:

1. Check build logs for errors
2. Verify file structure
3. Ensure nuxt.config.ts is correct
4. Check runtime logs for errors

API Routes Not Working

Problem: API routes return 404

Solution:

1. Check files are in server/api/ directory
2. Verify file naming convention
3. Check runtime logs for errors
4. Ensure proper HTTP method handling

Slow Build Times

Problem: Build takes too long

Solution:

1. Use npm ci instead of npm install
2. Enable dependency caching
3. Reduce build steps
4. Consider upgrading plan

Best Practices

Project Structure

my-nuxt-app/
├── pages/
│   ├── index.vue
│   └── about.vue
├── components/
│   └── MyComponent.vue
├── composables/
│   └── useMyComposable.ts
├── server/
│   └── api/
│       └── hello.ts
├── public/
│   └── favicon.ico
├── nuxt.config.ts
├── package.json
└── README.md

Environment Variables

• Use .env for local development
• Never commit .env files
• Use NUXT_PUBLIC_ prefix for client-side variables
• Rotate secrets regularly

Performance

• Use ISR (Incremental Static Regeneration)
• Enable image optimization
• Use code splitting
• Minimize bundle size
• Enable compression

Security

• Never expose secrets in client code
• Use HTTPS only
• Validate all inputs
• Use CSRF protection
• Keep dependencies updated

Advanced Configuration

Custom Nuxt Config

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true,
  
  app: {
    head: {
      title: 'My Nuxt App',
      meta: [
        { name: 'description', content: 'My Nuxt application' }
      ]
    }
  },
  
  modules: [
    '@nuxtjs/tailwindcss',
    '@pinia/nuxt'
  ],
  
  runtimeConfig: {
    apiSecret: '',
    public: {
      apiUrl: ''
    }
  },
  
  routeRules: {
    '/': { prerender: true },
    '/blog/**': { isr: 3600 }
  },
  
  nitro: {
    preset: 'node-server'
  }
})

Custom Server

For advanced use cases, you can customize the Nitro server:

// server/plugins/custom.ts
export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('request', (event) => {
    // Custom request handling
  })
})

Examples

Basic Nuxt App

<!-- pages/index.vue -->
<template>
  <div>
    <h1>Welcome to Nuxt on Deployxa!</h1>
  </div>
</template>

With Data Fetching

<!-- pages/index.vue -->
<template>
  <div>
    <h1>{{ data.title }}</h1>
  </div>
</template>

<script setup>
const { data } = await useFetch('/api/data')
</script>

API Route

// server/api/users.ts
export default defineEventHandler(async () => {
  return [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' }
  ]
})

Related Topics

• Deploy Vue
• Deploy Next.js
• Environment Variables
• Custom Domains
• Monitoring

Resources

• Nuxt Documentation
• Deployxa CLI
• API Reference
• Community Discord

---

Need Help? Contact support@deployxa.com or join our community Discord.