vite-plugin-vercel

[!WARNING] :construction: Work In Progress

You are on the Vite Environment API development branch. Check out v9 branch current stable version.

Vercel adapter for Vite 6.

Bundle your Vite application as supported by Vercel Output API (v3).

Install

npm i -D vite-plugin-vercel

yarn add -D vite-plugin-vercel

pnpm add -D vite-plugin-vercel

bun add -D vite-plugin-vercel

Features

• [x] SSG/Static files
  • see prerender config
• [x] SSR/Serverless functions
  • .[jt]s files under the <root>/api folder of your project are automatically bundled as Serverless functions under .vercel/output/functions/api/*.func
  • see additionalEndpoints config
• [x] ISR/Prerender functions
  • see isr config. Also see implementation of vike for example
• [x] Edge functions
• [x] Edge middleware
• [ ] Images optimization
• [ ] Preview mode
• [x] Advanced config

Simple usage

Install this package as a dev dependency and add it to your Vite config:

// vite.config.ts
import { defineConfig } from 'vite';
import vercel from 'vite-plugin-vercel';
import { getEntriesFromFs } from "vite-plugin-vercel/utils";

export default defineConfig({
  plugins: [vercel({
    entries: [
      ...(await getEntriesFromFs("endpoints/api", {
        // Auto mapping examples:
        //   endpoints/api/page.ts -> /api/page
        //   endpoints/api/name/[name].ts -> /api/name/*
        destination: "api",
      }))
    ]
  })],
});

[!NOTE] @vercel/build currently forces the building of files in the /api folder, with no way to disable this behavior. It's recommended to place your files in a different folder.

Configure endpoints

Endpoints added via getEntriesFromFs can be configured by exporting values from the endpoint file:

// file: endpoints/api/endpoint.ts

// Should run on edge runtime
export const edge = true;

// Always add those header to this endpoint
export const headers = {
  'Some-Header': 'some value',
};

// Stream the response
export const streaming = true;

// Enable Incremental Static Regeneration for this endpoint
export const isr = {
  expiration: 30,
};

export default async function handler() {
  return new Response('Edge Function: OK', {
    status: 200,
  });
}

Edge middleware

You can use Edge middleware as describe in the official documentation (i.e. with a middleware.ts file at the root of your project).

FAQ

What does ISR do in dev mode?

Nothing. It's a production-only feature

What does edge: true target do in dev mode?

Nothing (yet?). If you have a use-case where an actual Edge runtime would be necessary in dev, please open a discussion

I don't see Vercel specific headers in dev mode

This is not yet supported. Please open an issue if you need this (PR welcome).

Related documentation: https://vercel.com/docs/edge-network/headers/request-headers

Migration from v9

TODO