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

``bash
npm i -D vite-plugin-vercel
`

`bash
yarn add -D vite-plugin-vercel
`

`bash
pnpm add -D vite-plugin-vercel
`

`bash
bun add -D vite-plugin-vercel
`

Features

- [x] SSG/Static files
- see prerender config
- [x] SSR/Serverless functions
- .[jt]s files under the /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:

`ts
// 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.

$3

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

`ts
// 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,
});
}
`

$3

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

$3

Nothing. It's a production-only feature

$3

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

$3

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