Vercel

Deploy Nitro apps to Vercel functions or edge.

Preset: vercel

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.

Monorepo

Monorepo is supported by Vercel. However a custom "Root Directory" must be specified in "Project Settings > General" tab. Also make sure that "Include source files outside of the Root Directory" is checked.

Examples of values for "Root Directory": apps/web or packages/app.

Vercel edge functions

Preset: vercel_edge

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

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:

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

You can now access data store in any event handler:

export default defineEventHandler(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.

On-Demand incremental static regeneration (ISR)

On-demand revalidation allows you to purge the cache for an ISR route whenever you want, foregoing the time interval required with background revalidation.

To revalidate a page on demand:

1. Create an Environment Variable which will store a revalidation secret
   • You can use the command openssl rand -base64 32 or Generate a Secret to generate a random value.
2. Update your configuration:
   nitro.config.tsnuxt.config.ts

   ts

   nitro.config.ts

   ts

   export default defineNitroConfig({
     vercel: {
       config: {
         bypassToken: process.env.VERCEL_BYPASS_TOKEN
       }
     }
   })
   

3. To trigger "On-Demand Incremental Static Regeneration (ISR)" and revalidate a path to a Prerender Function, make a GET or HEAD request to that path with a header of x-prerender-revalidate: bypassToken. When that Prerender Function endpoint is accessed with this header set, the cache will be revalidated. The next request to that function should return a fresh response.