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:

import { defineConfig } from 'vite';
import vercel from 'vite-plugin-vercel';
import ssr from 'vite-plugin-ssr';

export default defineConfig({
  plugins: [ssr(), vercel()],
});

Usage with vite-plugin-ssr

vite-plugin-ssr will support this plugin when stable. In the meantime, you can add experimental support yourself.

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

// vite.config.ts
import { defineConfig } from 'vite';
import ssr from 'vite-plugin-ssr/plugin';
import vercel from 'vite-plugin-vercel';
import vercelSsr from '@magne4000/vite-plugin-vercel-ssr';

export default defineConfig(async ({ command, mode }) => {
  return {
    plugins: [ssr(), vercel(), vercelSsr()],
    build: {
      polyfillDynamicImport: false,
    },
    vercel: {
      // Tweak what you need, check TS definition for details
    },
  };
});

Config

See TS types for details.

Demo