Nuxt3 中文课程《实战全栈开发简书》限时优惠
Deploy

Vercel

Deploy your Nuxt Application to Vercel infrastructure.

Zero Configuration ✨
Integration with Vercel is possible with zero configuration, learn more.

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.

Read more about the Vercel KV driver on Unstorage documentation.
  1. Install @vercel/kv dependency:
    Terminal
    npm i @vercel/kv
    
  2. Update your nuxt.config:
    nuxt.config.ts
    export default defineNuxtConfig({
      nitro: {
        storage: {
          data: {
            driver: 'vercelKV'
            /* Vercel KV driver options */
          }
        }
      }
    })
    
You need to either set KV_REST_API_URL and KV_REST_API_TOKEN environment variables or pass url and token to driver options. Check driver docs for more information about usage.

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

server/routes/hello.ts
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. It will be merged with built-in auto generated config.

Templates

Nuxt Vercel ISR

Example of a Nuxt application with hybrid rendering deployed on Vercel.

Nuxt on the Edge on Vercel

Example of a Nuxt application running on Vercel Edge Functions.

Learn More

Head over Nitro documentation to learn more about On-Demand Incremental Static Regeneration or more advanced options.