vite-plugin-vercel

This is a Work In Progress Vercel adapter for vite.

Its purpose is to help you bundle your application in .vercel folder as supported by Vercel API v3.

Features

• SSG/Static files support
  • see prerender config
• SSR/Serverless functions support
  • .[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
• ISR/Prerender functions support
  • see isr config. Also see implementation of vite-plugin-ssr for example
• Edge functions support
• Images optimization support
• Preview mode support
• Advanced config override
  • Complete config override

Usage

First, make sure ENABLE_VC_BUILD=1 is declared as an Environment Variable in your deployment configuration.

Then, install this package as a dev dependency and add it to your Vite config like this:

1import { defineConfig } from 'vite';
2import vercel from 'vite-plugin-vercel';
3import ssr from 'vite-plugin-ssr/plugin';
4
5export default defineConfig({
6  plugins: [ssr(), vercel()],
7});

Usage with vite-plugin-ssr

vite-plugin-ssr is supported through @magne4000/vite-plugin-vercel-ssr plugin.

Install @magne4000/vite-plugin-vercel-ssr package, and update your vite config:

1// vite.config.ts
2import { defineConfig } from 'vite';
3import ssr from 'vite-plugin-ssr/plugin';
4import vercel from 'vite-plugin-vercel';
5import vercelSsr from '@magne4000/vite-plugin-vercel-ssr';
6
7export default defineConfig(async ({ command, mode }) => {
8  return {
9    plugins: [ssr(), vercel(), vercelSsr()],
10    vercel: {
11      // Tweak what you need, check TS definition for details
12    },
13  };
14});

Config

See TS types for details.

Demo

https://test-vite-vercel-plugin.vercel.app/