vite-plugin-vercel

Vercel adapter for Vite.

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

Install

1npm i -D vite-plugin-vercel

1yarn add -D vite-plugin-vercel

1pnpm add -D vite-plugin-vercel

1bun add -D vite-plugin-vercel

Features

• SSG/Static files
  • see prerender config
• 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
• ISR/Prerender functions
  • see isr config. Also see implementation of vike for example
• Edge functions
• Edge middleware
• Images optimization
• Preview mode
• Advanced config

Simple usage

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

1// vite.config.ts
2import { defineConfig } from 'vite';
3import vercel from 'vite-plugin-vercel';
4
5export default defineConfig({
6  plugins: [vercel()],
7  vercel: {
8    // optional configuration options, see "Advanced usage" below for details
9  },
10});

[!NOTE] Files under /api or /_api directory will automatically be added under /api/* route Prefer using /_api directory, as @vercel/build is currently force building /api files, with no way to disable it, thus avoiding double compilation and unexpected behaviour.

Configure endpoints

Endpoints under /api, /_api or added through additionalEndpoints can be configured by exporting values from the endpoint file:

1// file: _api/endpoint.ts
2
3// Should run on edge runtime
4export const edge = true;
5
6// Always add those header to this endpoint
7export const headers = {
8  'Some-Header': 'some value',
9};
10
11// Stream the response
12export const streaming = true;
13
14// Enable Incremental Static Regeneration for this endpoint
15export const isr = {
16  expiration: 30,
17};
18
19export default async function handler() {
20  return new Response('Edge Function: OK', {
21    status: 200,
22  });
23}

[!NOTE] Please create an issue if you need other per-endpoints configurations

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).

Usage with Vike

Vike is supported through @vite-plugin-vercel/vike plugin.

You only need to install @vite-plugin-vercel/vike, the Vite config stays the same as above.

You can then leverage config files to customize your endpoints:

1// /pages/product/+config.ts
2
3import Page from './Page';
4import type { Config } from 'vike/types';
5
6export default {
7  // Customize ISR config for this page
8  isr: { expiration: 15 },
9  // Target Edge instead of Serverless
10  edge: true,
11  // append headers to all responses
12  headers: {
13    'X-Header': 'value'
14  }
15} satisfies Config;

You will also need to extend the renderer config so that vike is aware of the new parameter:

1// /renderer/+config.ts
2
3import config from '@vite-plugin-vercel/vike/config';
4import type { Config } from 'vike/types';
5
6export default {
7  extends: config,
8} satisfies Config;

Advanced usage

1// vite.config.ts
2import { defineConfig } from 'vite';
3import vercel from 'vite-plugin-vercel';
4
5export default defineConfig({
6  plugins: [vercel()],
7  vercel: {
8    // All the followings optional
9
10    /**
11     * How long Functions should be allowed to run for every request, in seconds.
12     * If left empty, default value for your plan will be used.
13     */
14    defaultMaxDuration: 30,
15    /**
16     * Enable streaming responses by default for all Serverless Functions
17     */
18    defaultSupportsResponseStreaming: true,
19    /**
20     * Default expiration time (in seconds) for prerender functions.
21     * Defaults to 86400 seconds (24h).
22     */
23    expiration: 86400,
24    /**
25     * Also known as Server Side Generation, or SSG.
26     * If present, this function is responsible to create static files in `.vercel/output/static`.
27     * Defaults to `false`, which disables prerendering.
28     */
29    prerender(resolvedConfig) {
30      // Check `/packages/vike/vike.ts` `prerender` for an example
31    },
32    /**
33     * See https://vercel.com/docs/projects/project-configuration#rewrites
34     */
35    rewrites: [{ source: '/about', destination: '/about-our-company.html' }],
36    /**
37     * @see {@link https://vercel.com/docs/projects/project-configuration#headers}
38     */
39    headers: [
40      {
41        "source": "/service-worker.js",
42        "headers": [
43          {
44            "key": "Cache-Control",
45            "value": "public, max-age=0, must-revalidate"
46          }
47        ]
48      }
49    ],
50    /**
51     * See https://vercel.com/docs/projects/project-configuration#redirects
52     */
53    redirects: [
54      { source: '/me', destination: '/profile.html', permanent: false },
55    ],
56    /**
57     * See https://vercel.com/docs/projects/project-configuration#cleanurls
58     */
59    cleanUrls: true,
60    /**
61     * See https://vercel.com/docs/projects/project-configuration#trailingslash
62     */
63    trailingSlash: true,
64    /**
65     * By default, all `api/*` and `_api/*` endpoints are compiled under `.vercel/output/functions/api/*.func`.
66     * If others serverless functions need to be compiled under `.vercel/output/functions`, they should be added here.
67     * For instance, a framework can leverage this to have a generic ssr endpoint
68     * without requiring the user to write any code.
69     */
70    additionalEndpoints: [
71      {
72        // can also be an Object representing an esbuild StdinOptions
73        source: '/path/to/file.ts',
74        // URL path of the handler, will be generated to `.vercel/output/functions/api/file.func/index.js`
75        destination: '/api/file',
76      },
77    ],
78    /**
79     * Advanced configuration to override .vercel/output/config.json
80     * See https://vercel.com/docs/build-output-api/v3/configuration#configuration
81     */
82    config: {
83      // routes?: Route[];
84      // images?: ImagesConfig;
85      // wildcard?: WildcardConfig;
86      // overrides?: OverrideConfig;
87      // cache?: string[];
88      // crons?: CronsConfig;
89    },
90    /**
91     * ISR and SSG pages are mutually exclusive. If a page is found in both, ISR prevails.
92     * Keys are path relative to .vercel/output/functions directory, either without extension,
93     * or with `.prerender-config.json` extension.
94     * If you have multiple isr configurations pointing to the same underlying function, you can leverage the `symlink`
95     * property.
96     *
97     * Can be an object or a function returning an object (or a Promise of an object).
98     *
99     * Check `/packages/vike/vike.ts` `vitePluginVercelVpsIsrPlugin` for advanced usage.
100     */
101    isr: {
102      // `symlink: 'ssr_'` means that a function is available under `.vercel/output/functions/ssr_.func`
103      '/pages/a': { expiration: 15, symlink: 'ssr_', route: '^/a/.*$' },
104      '/pages/b/c': { expiration: 15, symlink: 'ssr_', route: '^/b/c/.*$' },
105      '/pages/d': { expiration: 15, symlink: 'ssr_', route: '^/d$' },
106      '/pages/e': { expiration: 25 },
107    },
108    /**
109     * Defaults to `.vercel/output`. Mostly useful for testing purpose
110     */
111    outDir: '.vercel/output',
112  },
113});

Demo

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