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.

Vercel Edge Functions

It is possible to deploy your Nuxt 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, set the following environment variable:

SERVER_PRESET=vercel_edge

Or update the build command to nuxt build --preset=vercel_edge.

Vercel KV Storage

You can easily use Vercel KV Storage with Nuxt Server Storage.

1. Install @vercel/kv dependency:
   Terminal

   npm i @vercel/kv
   

2. Update your nuxt.config.ts:
   nuxt.config.ts

   export default defineNuxtConfig({
     nitro: {
       storage: {
         data: {
           driver: 'vercelKV'
           /* Vercel KV driver options */
         }
       }
     }
   })
   

You can now access your data store anywhere in your server/ directory:

export default defineEventHandler(async (event) => {
  const dataStorage = useStorage('data');
  await dataStorage.setItem('hello', 'world');

  return {
    hello: await dataStorage.getItem("hello"),
  }
})

Custom Build Output Configuration

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

Templates

Learn More