@brendonovich/vite-plugin-vercel

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

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

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

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:

// 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()],
    vercel: {
      // Tweak what you need, check TS definition for details
    },
  };
});

Config

See TS types for details.

Demo

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