bantam.hostbantam.host
Back to all frameworks
CLI Guide

Deploy Nuxt.js with Bantam CLI

Deploy Vue.js applications with static site generation

Install Bantam CLI:

npm install -g @bantamhq/cli

View on NPM: @bantamhq/cli

Quick start:

# Build your Nuxt.js app
npm run generate

# Deploy it
bantam deploy .output/public

Quick Start

1

Install dependencies

Install your Nuxt.js project dependencies

npm install
2

Generate static site

Build and pre-render your Nuxt app to static HTML

npm run generate
This creates the .output/public directory with your static files
3

Deploy with Bantam

Your Nuxt.js site is now live!

bantam deploy .output/public
Get an instant URL like https://my-nuxt-app-abc123.bantam.site

Framework Details

Nuxt 3 Static Configuration

Configure Nuxt 3 for static site generation with the proper Nitro preset:

nuxt.config.ts:

export default defineNuxtConfig({
  nitro: {
    preset: 'static',
    prerender: {
      crawlLinks: true,
      routes: ['/sitemap.xml']
    }
  },
  ssr: true
})
The static preset ensures all pages are pre-rendered at build time.

Dynamic Routes

Pre-render dynamic routes by specifying them in your config:

Specify routes to pre-render:

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: [
        '/blog/post-1',
        '/blog/post-2',
        '/products/item-1'
      ]
    }
  }
})
Dynamic routes not listed won't be pre-rendered and will return 404.

Build Output

Nuxt 3 generates these in .output/public:

  • index.html - Pre-rendered pages
  • _nuxt/ - JavaScript bundles and assets
  • _payload.json - Route payloads for navigation
  • Pre-rendered HTML for each route
Nuxt 2 outputs to dist instead. Use bantam deploy dist for Nuxt 2.

Advanced Usage

Custom Domain

Deploy directly to your own domain

bantam deploy ./dist --domain myapp.com

Permanent Deployment

Keep your site online forever (requires login)

bantam deploy ./dist --permanent

Custom Expiry

Set how long your deployment stays online

bantam deploy ./dist --expiry-days 7

Custom Subdomain

Choose your own subdomain on bantam.site

bantam deploy ./dist --subdomain my-project

CI/CD Integration

Add Bantam to your continuous deployment pipeline:

# GitHub Actions example
- name: Deploy to Bantam
  run: |
    npm install -g @bantamhq/cli
    bantam login --token ${{ secrets.BANTAM_TOKEN }}
    bantam deploy ./dist --domain myapp.com --permanent
Troubleshooting

Common Issues & Solutions

Quick fixes for deployment challenges

01.Build fails with module errors?

Clear your cache and reinstall dependencies:

rm -rf .nuxt .output node_modules
npm install
npm run generate

02.Dynamic pages showing 404?

Ensure all dynamic routes are specified:

// nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    'nitro:config': async (nitroConfig) => {
      const posts = await fetchBlogPosts()
      nitroConfig.prerender.routes.push(
        ...posts.map(p => `/blog/${p.slug}`)
      )
    }
  }
})

03.API calls failing in production?

Use runtime config for API endpoints:

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE
    }
  }
})

// In components
const config = useRuntimeConfig()
const { data } = await $fetch(`${config.public.apiBase}/api/posts`)

04.Images not optimized?

Configure Nuxt Image for static generation:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    provider: 'ipx',
    ipx: {
      dir: 'public'
    }
  }
})

05.How to handle i18n routes?

Pre-render all locale variations:

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: ['en', 'fr', 'es'],
    strategy: 'prefix'
  },
  nitro: {
    prerender: {
      routes: ['/', '/fr', '/es', '/en/about', '/fr/about', '/es/about']
    }
  }
})