Nuxt.js

Deploy your Nuxt.js applications with zero configuration and enterprise-grade performance. Our platform is specifically optimized for Nuxt’s Nitro engine and universal rendering capabilities, delivering faster builds and superior runtime performance compared to traditional hosting solutions.

Why Sherpa.sh is Perfect for Nuxt.js

Zero Edge Request Charges for Nitro’s Smart Chunking

Unlike other platforms that charge per edge request, we never bill for edge traffic. This is crucial for Nuxt.js applications because of Nitro’s intelligent optimization strategy.

Nuxt 3’s Nitro engine automatically creates numerous optimized chunks during the build process:

// Example Nitro build output:
// .nuxt/dist/server/chunks/nitro/node-server.mjs (8kb) - Server runtime
// .nuxt/dist/client/_nuxt/entry.js (12kb) - App entry point
// .nuxt/dist/client/_nuxt/index-a1b2c3.js (4kb) - Home page component
// .nuxt/dist/client/_nuxt/about-d4e5f6.js (3kb) - About page component
// .nuxt/dist/client/_nuxt/composables-g7h8i9.js (2kb) - Auto-imported utilities

Why This Matters:

• Nitro generates 30-80+ optimized chunks per application
• Each chunk loads on-demand with intelligent code splitting
• Other platforms charge $0.01-0.10 per 10,000 edge requests
• With Sherpa.sh: $0.00 for unlimited edge requests

Real-World Cost Impact:

Monthly Traffic for Typical Nuxt App:
- Static Assets: 3 million requests (JS chunks, CSS, images)
- SSR Pages: 800,000 requests
- API Routes: 1.2 million requests
- ISR Updates: 200,000 requests

Cost Comparison:
- Other Platforms: $200-400/month in edge fees
- Sherpa.sh: $0

Optimized Nitro Engine Performance

We’ve fine-tuned our infrastructure specifically for Nuxt’s Nitro server engine to deliver optimal universal rendering performance:

Performance Optimizations:

• Cold Start Elimination: Pre-warmed Nitro instances across global regions
• Memory Optimization: 1GB-4GB+ containers with intelligent auto-scaling
• Request Routing: Smart load balancing optimized for Nuxt’s file-based routing
• Vue Hydration: Optimized client-side hydration with reduced layout shifts

Performance Benchmarks:

Universal Rendering Response Times (95th percentile):
- Sherpa.sh: 76ms average globally
- Traditional VPS: 380ms average
- Other serverless: 220ms average (including cold starts)

Ready to deploy? Create a free account →

Quick Start Guide

Get your Nuxt.js app live in under 2 minutes with our streamlined deployment process.

Prerequisites

Before deploying, ensure you have:

• Nuxt.js 3.x+ project
• Git repository hosted on GitHub
• Node.js 18+ installed locally for development
• Package.json with proper build scripts configured

Deployment Steps

Step 1: Connect Repository
Link your Git repository to Sherpa.sh through our dashboard. We support Github and automatically sync with your repository.

Step 2: Auto-Detection
Our system automatically detects your Nuxt configuration by analyzing:

• nuxt.config.ts or nuxt.config.js file
• Package.json dependencies and scripts
• Project structure and routing setup

Step 3: Configure Build Settings
We automatically configure optimal build settings, but you can customize:

• Build command (defaults to npm run build)
• Environment variables
• Node.js version
• Custom headers and redirects

Step 4: Deploy
Push to your main branch to trigger automatic deployment. Our system will:

• Install dependencies
• Run the Nitro build process
• Deploy to global edge locations
• Provision SSL certificates

Step 5: Go Live
Your app becomes available at https://your-app.sherpa.software with full CDN distribution.

What You Get Instantly

• Zero Configuration: Works with your existing nuxt.config.ts without modifications
• Global CDN: Static assets served from 200+ edge locations worldwide
• Automatic HTTPS: SSL certificates provisioned and auto-renewed
• Universal Rendering: Full support for SSR, SSG, SPA, and ISR modes
• Pay-per-Use: No idle costs - only pay for actual compute and bandwidth usage

Platform Optimizations

Automatic Nitro Configuration

When you deploy to Sherpa.sh, we automatically enhance your Nitro configuration for maximum performance while preserving your existing settings.

Enhanced Configuration:

// Your original nuxt.config.ts is preserved, but we add optimizations:
export default defineNuxtConfig({
  nitro: {
    preset: 'node-server', // Optimized for our infrastructure
  },
  // Your existing configuration remains unchanged
  css: ['~/assets/css/main.css'],
  modules: ['@nuxtjs/tailwindcss']
})

Environment Variables Set Automatically:

# Runtime environment variables configured by Sherpa.sh
PORT=3000                                    # Standard runtime port
HOST=0.0.0.0                           # Bind to all network interfaces
NODE_ENV=production                          # Enable production optimizations

Performance Enhancements

Nitro’s Code Splitting Integration:
Nuxt’s automatic code splitting works seamlessly with our HTTP/3 infrastructure:

• Route-based Splitting: Each page component loads independently for optimal performance
• Composable Splitting: Auto-imported utilities are bundled in separate, cacheable chunks
• Plugin Splitting: Nuxt plugins are optimized for parallel loading and execution

Static Asset Acceleration:

• File Hashing: Immutable file names with content hashes for aggressive caching
• Multi-format Compression: Automatic Brotli, Gzip, and deflate compression
• Edge Caching: Assets cached globally with sub-50ms load times
• HTTP/3 Support: Latest protocol for faster asset delivery

Pre-rendering and ISR Support:
Enable static generation and incremental regeneration for optimal performance:

// pages/blog/[slug].vue - Static pre-rendering
<script setup>
// This route will be pre-rendered at build time
definePageMeta({
  prerender: true
})

// Fetch data at build time
const { data: post } = await $fetch(`/api/posts/${route.params.slug}`)
</script>

Advanced Features

Incremental Static Regeneration (ISR)

Nuxt 3’s ISR capabilities work perfectly with Sherpa’s intelligent caching infrastructure. Configure different caching strategies for different route patterns:

// nuxt.config.ts - Advanced route rules
export default defineNuxtConfig({
  nitro: {
    routeRules: {
      // Static pages - pre-rendered at build time
      '/': { prerender: true },
      '/about': { prerender: true },

      // Blog posts - ISR with 1-hour cache
      '/blog/**': {
        prerender: true,
        headers: { 'cache-control': 's-maxage=3600' }
      },

      // Product pages - ISR with 5-minute cache
      '/products/**': {
        isr: 300, // Regenerate every 5 minutes
        headers: { 'cache-control': 's-maxage=300, stale-while-revalidate=60' }
      },

      // API routes - Dynamic with caching
      '/api/**': {
        cors: true,
        headers: { 'cache-control': 'max-age=300' }
      },

      // Admin area - Always dynamic, no caching
      '/admin/**': {
        ssr: false,
        index: false,
        headers: { 'cache-control': 'no-cache, no-store, must-revalidate' }
      }
    }
  }
})

ISR Benefits:

• Faster Builds: Only rebuild changed pages instead of entire site
• Fresh Content: Automatically update cached pages when content changes
• Reduced Server Load: Serve cached pages while regenerating in background
• SEO Optimization: Pre-rendered pages for better search engine indexing

Image Optimization

Automatic image optimization works seamlessly with Nuxt’s built-in <NuxtImg> component:

<template>
  <!-- Standard img tag -->
  <img src="/hero.jpg" alt="Hero image" />

  <!-- Optimized with NuxtImg component -->
  <NuxtImg
    src="/hero.jpg"
    alt="Hero image"
    width="800"
    height="600"
    format="webp"
    quality="80"
  />

  <!-- Responsive images with multiple sizes -->
  <NuxtImg
    src="/hero.jpg"
    alt="Hero image"
    sizes="sm:100vw md:50vw lg:400px"
    densities="x1 x2"
  />
</template>

Optimization Features:

• Format Conversion: Automatic WebP and AVIF conversion for modern browsers
• Responsive Sizing: Generate multiple sizes based on device capabilities
• Lazy Loading: Built-in intersection observer for performance
• Global CDN: Optimized images served from nearest edge location
• Quality Optimization: Intelligent quality adjustment based on image content

Intelligent Caching Strategy

We implement a multi-tier caching strategy optimized for Nuxt applications:

Cache Headers by Content Type:

# Static assets (JS, CSS, images)
Cache-Control: public, max-age=31536000, immutable

# Pre-rendered pages
Cache-Control: public, max-age=3600, s-maxage=3600

# ISR pages
Cache-Control: public, max-age=300, s-maxage=300, stale-while-revalidate=60

# API routes
Cache-Control: private, max-age=300

# Dynamic pages
Cache-Control: no-cache, must-revalidate

Cache Debugging and Monitoring:
Monitor cache performance through browser DevTools and our dashboard:

# Response headers show detailed cache status
Cdn-Cache: HIT              # Served from edge cache
Cdn-Cache-Region: us-east-1 # Cache region
Age: 1847                   # Cache age in seconds
X-Cache-Status: fresh       # Cache freshness status

Developer Experience

Local Development Compatibility

Your existing development workflow remains completely unchanged. Sherpa.sh works with your current setup without requiring any modifications:

# Standard Nuxt development commands (unchanged)
npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build locally
npm run generate     # Generate static site

# Deploy to Sherpa.sh
git add .
git commit -m "Update content"
git push origin main # Triggers automatic deployment

Build Process Insights

Monitor your Nitro builds in real-time through our comprehensive dashboard:

Build Analytics:

• Build Duration: Typical Nuxt builds complete in 45-90 seconds
• Bundle Analysis: Detailed breakdown of chunk sizes and dependencies
• Nitro Optimization: View tree-shaking results and dead code elimination
• Performance Metrics: Track build performance over time

Build Logs:

✓ Nuxt project info
✓ Installing dependencies (npm ci)
✓ Building Nuxt application
✓ Nitro build completed in 52.3s
✓ Analyzing bundle size: 2.1MB total
  - Client bundle: 1.4MB
  - Server bundle: 0.7MB
✓ Optimizing static assets
✓ Deploying to global edge network
✓ Deployment successful in 1m 23s

Real-Time Debugging & Monitoring

Access comprehensive logging and monitoring through the Sherpa.sh dashboard:

Available Logs:

• Nitro Server Logs: SSR rendering performance, errors, and request timing
• CDN Access Logs: Static asset delivery metrics and cache hit rates
• API Route Logs: Server-side function execution times and error rates
• Build Logs: Complete build process with detailed timing information

Configuration Examples

Advanced Route Rules

Configure different behaviors for different parts of your application:

// nuxt.config.ts - Comprehensive route configuration
export default defineNuxtConfig({
  nitro: {
    routeRules: {
      // Homepage - pre-rendered with long cache
      '/': {
        prerender: true,
        headers: { 'cache-control': 'public, max-age=3600' }
      },

      // Blog section - ISR with sitemap generation
      '/blog': { prerender: true },
      '/blog/**': {
        isr: 3600, // Regenerate hourly
        headers: { 'cache-control': 's-maxage=3600' }
      },

      // Product pages - ISR with SEO optimization
      '/products': { prerender: true },
      '/products/**': {
        isr: 1800, // Regenerate every 30 minutes
        headers: {
          'cache-control': 's-maxage=1800, stale-while-revalidate=300',
          'x-robots-tag': 'index, follow'
        }
      },

      // API routes with CORS and caching
      '/api/public/**': {
        cors: true,
        headers: {
          'cache-control': 'public, max-age=300',
          'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE'
        }
      },

      // Private API routes
      '/api/private/**': {
        headers: { 'cache-control': 'private, no-cache' }
      },

      // Admin panel - SPA mode with no indexing
      '/admin/**': {
        ssr: false,
        index: false,
        headers: {
          'cache-control': 'no-cache, no-store, must-revalidate',
          'x-robots-tag': 'noindex, nofollow'
        }
      }
    }
  }
})

Environment-Specific Configuration

Handle different environments with flexible configuration:

// nuxt.config.ts - Environment-aware configuration
const isDevelopment = process.env.NODE_ENV === 'development'
const isProduction = process.env.NODE_ENV === 'production'

export default defineNuxtConfig({
  // Development vs Production settings
  ssr: isProduction, // SSR in production, SPA in development for faster dev

  nitro: {
    preset: isProduction ? 'node-server' : 'dev',
    minify: isProduction,
    sourceMap: !isProduction
  },

  // Runtime configuration
  runtimeConfig: {
    // Private keys (only available server-side)
    apiSecret: process.env.API_SECRET,
    databaseUrl: process.env.DATABASE_URL,

    // Public keys (exposed to client-side)
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE ||
        (isProduction ? 'https://api.yourapp.com' : 'http://localhost:3001'),
      siteUrl: process.env.NUXT_PUBLIC_SITE_URL ||
        (isProduction ? 'https://yourapp.com' : 'http://localhost:3000'),
      gtmId: process.env.NUXT_PUBLIC_GTM_ID || ''
    }
  },

  // Environment-specific modules
  modules: [
    '@nuxtjs/tailwindcss',
    ...(isProduction ? ['@nuxtjs/robots'] : [])
  ]
})

Custom Headers and Security

Implement comprehensive security headers for production applications:

// nuxt.config.ts - Security-focused configuration
export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/**': {
        headers: {
          // Prevent clickjacking
          'X-Frame-Options': 'DENY',

          // Prevent MIME type sniffing
          'X-Content-Type-Options': 'nosniff',

          // Referrer policy
          'Referrer-Policy': 'strict-origin-when-cross-origin',

          // Permissions policy
          'Permissions-Policy': 'camera=(), microphone=(), geolocation=()',

          // Content Security Policy
          'Content-Security-Policy': [
            "default-src 'self'",
            "script-src 'self' 'unsafe-inline' https://www.googletagmanager.com",
            "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com",
            "font-src 'self' https://fonts.gstatic.com",
            "img-src 'self' data: https:",
            "connect-src 'self' https://api.yourapp.com"
          ].join('; ')
        }
      }
    }
  }
})

Troubleshooting

Common Issues and Solutions

Build Failures:

• Node.js Version: Ensure Node.js 18+ is specified in your package.json engines field
• Dependencies: Check for missing dependencies or version conflicts in package.json
• Memory Issues: Large applications may need increased memory limits in build settings
• Nitro Preset: Verify Nitro preset compatibility with your deployment requirements

// package.json - Specify Node.js version
{
  "engines": {
    "node": ">=18.0.0",
    "npm": ">=8.0.0"
  }
}

Getting Help

Documentation Resources:

• Comprehensive Guides: docs.sherpa.sh
• API Reference: Detailed API documentation for advanced configurations
• Best Practices: Performance optimization guides and security recommendations

Support:

• Discord Community: Join our Discord server for real-time help
• Support Tickets: Join our Discord server for submitting private support tickets

Ready to deploy your Nuxt.js application? Create a free account →