@vite-deploy/vercel

This adapter allows you to deploy your Vite project to Vercel. Learn how in our Vercel deployment guide.

Vercel is a deployment platform that allows you to host your site by connecting directly to your GitHub repository. This adapter builds your Vite project for deployment through Vercel.

Installation

Starter template

1. Download a basic template for your favorite host:

   npx giget@latest gh:web-runes/vite-deploy/examples/vercel-server

2. Install dependencies:

   npm

   npm install

   pnpm

   pnpm install

   yarn

   yarn install

3. Start the development server:

   npm

   npm run dev

   pnpm

   pnpm dev

   yarn

   yarn dev

Manual install

1. Add @vite-deploy/vercel to your project’s dependencies using your preferred package manager:

   npm

   npm install @vite-deploy/vercel

   pnpm

   pnpm add @vite-deploy/vercel

   yarn

   yarn add @vite-deploy/vercel

2. Add the plugin to your Vite config file:

   vite.config.js

   import vercel from "@vite-deploy/vercel";
   import { defineConfig } from "vite";
   
   export default defineConfig({
     plugins: [vercel({
       output: "server",
       handlerEntrypoint: "./src/handler.ts",
     })]
   });

3. Update your TypeScript config file to include necessary types:

   tsconfig.json

   {
     "compilerOptions": {
       "types": [
         "vite/client",
         "@vite-deploy/vercel/types"
       ]
     },
   }

4. Create the handler entrypoint:

   src/handler.ts

   import type { ExportedHandler } from "@vite-deploy/vercel";
   
   export default {
     fetch(request) {
       const url = new URL(request.url);
       return new Response(`Running ${url.pathname} in ${navigator.userAgent}!`);
     },
   } satisfies ExportedHandler;

5. Start the development server:

   npm

   npm run dev

   pnpm

   pnpm dev

   yarn

   yarn dev

Options

The Vercel adapter accepts output related options. It also accepts the following:

handlerEntrypoint

Type: string | URL

Specifies what module should be used. It accepts:

• Paths relative to Vite’s root: ./src/handler.ts.
• Absolute paths: /foo/handler.ts.
• Package specifiers: @my-pkg/handler.
• URLs: new URL("./src/handler.ts", import.meta.url).

vite.config.js

import vercel from "@vite-deploy/vercel";
import { defineConfig } from "vite";

export default defineConfig({
    plugins: [vercel({
        // ...
        handlerEntrypoint: "./src/handler.ts",
    })]
});

The module must return a ExportedHandler, which handles requests:

src/handler.ts

import type { ExportedHandler } from "@vite-deploy/vercel";

export default {
  fetch(request) {
    const url = new URL(request.url);
    return new Response(`Running ${url.pathname} in ${navigator.userAgent}!`);
  },
} satisfies ExportedHandler;

requestLoggingLevel

Type: "silent" | "info" | undefined
Default: "info"

Specifies if requests are logged in the terminal. It can be disabled you already handle logging at runtime:

vite.config.js

import vercel from "@vite-deploy/vercel";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [vercel({
    // ...
    requestLoggingLevel: "silent"
  })]
});