Vercel

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

   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.

Fine-grained ISR config via route rules

By default, query paramas are ignored by cache.

You can pass an options object to isr route rule to configure caching behavior.

• expiration: Expiration time (in seconds) before the cached asset will be re-generated by invoking the Serverless Function. Setting the value to false (or isr: true route rule) means it will never expire.
• group: Group number of the asset. Prerender assets with the same group number will all be re-validated at the same time.
• allowQuery: List of query string parameter names that will be cached independently.
  • If an empty array, query values are not considered for caching.
  • If undefined each unique query value is cached independently.
  • For wildcard /** route rules, url is always added
• passQuery: When true, the query string will be present on the request argument passed to the invoked function. The allowQuery filter still applies.

export default defineNitroConfig({
  routeRules: {
    "/products/**": {
      isr: {
        allowQuery: ["q"],
        passQuery: true,
      },
    },
  },
});