Vercel

Deploy Nitro apps to Vercel.

Preset: vercel (switch to this preset)

Deploy using Git

1. Push your code to your git repository (GitHub, GitLab, Bitbucket).
2. Import your project into Vercel.
3. Vercel will detect that you are using Nitro and will enable the correct settings for your deployment.
4. Your application is deployed!

After your project has been imported and deployed, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly “main”) will result in a Production Deployment.

Learn more about Vercel’s Git Integration.

Vercel Edge Functions

Preset: vercel-edge (switch to this preset)

It is possible to deploy your nitro applications directly on Vercel Edge Functions.

Vercel Edge Functions allow you to deliver content to your site's visitors with speed and personalization. They are deployed globally by default on Vercel's Edge Network and enable you to move server-side logic to the Edge, close to your visitor's origin. Edge Functions use the Vercel Edge Runtime, which is built on the same high-performance V8 JavaScript and WebAssembly engine that is used by the Chrome browser. By taking advantage of this small runtime, Edge Functions can have faster cold boots and higher scalability than Serverless Functions. Edge Functions run after the cache, and can both cache and return responses. Read More

In order to enable this target, please set NITRO_PRESET environment variable to vercel-edge.

Vercel KV Storage

You can easily use Vercel KV Storage with Nitro Storage.

1. Install @vercel/kv dependency:

{
  "devDependencies": {
    "@vercel/kv": "latest"
  }
}

Update your configuration:

import { defineNitroConfig } from 'nitropack/config'

export default defineNitroConfig({
  storage: {
    data: { driver: 'vercelKV' }
  }
})

export default defineNuxtConfig({
  nitro: {
    storage: {
      data: { driver: 'vercelKV' }
    }
  }
})

You can now access data store in any event handler:

export default eventHandler(async (event) => {
  const dataStorage = useStorage("data");
  await dataStorage.setItem("hello", "world");
  return {
    hello: await dataStorage.getItem("hello"),
  };
});

API routes

Nitro /api directory isn't compatible with Vercel. Instead, you have to use :

• routes/api/ for standalone usage
• server/api/ with Nuxt.

Custom Build Output Configuration

You can provide additional build output configuration using vercel.config key inside nitro.config. It will be merged with built-in auto generated config.