Nuxt SSR without the platform tax

Deploy

From nuxi build to live in five steps

Standard Nuxt tooling throughout. Do it by hand once, then move the same commands into CI.

~/acme-shop — zsh

$ npx nuxi build --preset node-server

✓ Built .output/ · Nitro node-server

$ edge compute create --name nuxt \

--size s-2vcpu-4gb --image ubuntu-24 \

--region london --script nodejs

✓ vm-4e81d0 running · 64.34.86.57

$ edge cdn domains add cdn-9c2e41 \

--domain shop.acme.com --jit-image \

--origin https://64.34.86.57

✓ SSL active · _nuxt/ cached at the edge

Per-request fees$0

shop.acme.comLive

RuntimeNitro · Node 22

VMs-2vcpu-4gb · london

1. 01

   Build with the node-server preset

   The output is a self-contained Node server. Try it locally before it goes anywhere.

   shellCopy

   $ npx nuxi build --preset node-server
   $ ls .output
   nitro.json  public  server
   $ node .output/server/index.mjs     # listening on :3000

2. 02

   Register an Edge image provider

   Keep <NuxtImg> and <NuxtPicture>. Route rules like swr work as documented on a VM.

   nuxt.config.tsCopy

   export default defineNuxtConfig({
     modules: ['@nuxt/image'],
     image: {
       provider: 'edge',
       providers: {
         edge: {
           provider: '~/providers/edge.ts',
           options: { baseURL: 'https://shop.acme.com' },
         },
       },
     },
     routeRules: { '/blog/**': { swr: 3600 } },
   })

3. 03

   Map modifiers to CDN parameters

   Width, height, fit and quality become URL parameters. The CDN transforms on the first request and caches the result.

   providers/edge.tsCopy

   import { joinURL } from 'ufo'
   import type { ProviderGetImage } from '@nuxt/image'
   
   export const getImage: ProviderGetImage = (src, opts) => {
     const { modifiers, baseURL } = opts
     const { width, height, fit, quality = 75 } = modifiers
     const q = new URLSearchParams({ format: 'auto' })
     q.set('quality', String(quality))
     if (width) q.set('width', String(width))
     if (height) q.set('height', String(height))
     if (fit) q.set('fit', fit)
     return { url: `${joinURL(baseURL, src)}?${q}` }
   }

4. 04

   Create a VM and start Nitro

   The nodejs library script installs Node 22, PM2 and an Nginx reverse proxy on first boot.

   shellCopy

   $ edge compute create --name nuxt --size s-2vcpu-4gb \
       --image ubuntu-24 --region london --script nodejs
   
   $ rsync -a .output/ root@<vm-ip>:/srv/shop/
   $ ssh root@<vm-ip> "pm2 start /srv/shop/server/index.mjs"

5. 05

   Front it with the CDN

   SSL is issued automatically. --jit-image switches on the transforms your provider asks for.

   shellCopy

   $ edge cdn create --name acme-shop
   $ edge cdn domains add cdn-9c2e41 \
       --domain shop.acme.com \
       --origin https://<vm-ip> \
       --jit-image

Prefer to hand it off? Give the job to your AI agent or have our engineers do it.