vite-plugin-vercel 6.2.0-dev.2
Install from the command line:
Learn more about npm packages
$ npm install @clearyai/vite-plugin-vercel@6.2.0-dev.2
Install via package.json:
"@clearyai/vite-plugin-vercel": "6.2.0-dev.2"
About this version
Vercel adapter for Vite.
Bundle your Vite application as supported by Vercel Output API (v3).
npm i -D vite-plugin-vercel
yarn add -D vite-plugin-vercel
pnpm add -D vite-plugin-vercel
bun add -D vite-plugin-vercel
- [x] SSG/Static files
- see
prerender
config
- see
- [x] 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
-
- [x] ISR/Prerender functions
- see
isr
config. Also see implementation of vike for example
- see
- [x] Edge functions
- [x] Edge middleware
- [ ] Images optimization
- [ ] Preview mode
- [x] Advanced config
Install this package as a dev dependency and add it to your Vite config:
// vite.config.ts
import { defineConfig } from 'vite';
import vercel from 'vite-plugin-vercel';
export default defineConfig({
plugins: [vercel()],
vercel: {
// optional configuration options, see "Advanced usage" below for details
},
});
[!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.
Endpoints under /api
, /_api
or added through additionalEndpoints
can be configured
by exporting values from the endpoint file:
// file: _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,
});
}
[!NOTE] Please create an issue if you need other per-endpoints configurations
You can use Edge middleware as describe in the official documentation (i.e. with a middleware.ts
file at the root of your project).
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.
[!IMPORTANT]
@vite-plugin-vercel/vike
supersedes the old@magne4000/vite-plugin-vercel-ssr
package. As such, you should remove@magne4000/vite-plugin-vercel-ssr
from your package.json and vite config file.
You can then leverage config files to customize ISR configuration:
// /pages/product/+config.ts
import Page from './Page';
import type { Config } from 'vike/types';
// Customize ISR config for this page
export default {
isr: { expiration: 15 },
} satisfies Config;
You will also need to extend the renderer config so that vike
is aware of the new parameter:
// /renderer/+config.ts
import config from '@vite-plugin-vercel/vike/config';
import type { Config } from 'vike/types';
export default {
extends: config,
} satisfies Config;
// vite.config.ts
import { defineConfig } from 'vite';
import vercel from 'vite-plugin-vercel';
export default defineConfig({
plugins: [vercel()],
vercel: {
// All the followings optional
/**
* How long Functions should be allowed to run for every request, in seconds.
* If left empty, default value for your plan will be used.
*/
defaultMaxDuration: 30,
/**
* Enable streaming responses by default for all Serverless Functions
*/
defaultSupportsResponseStreaming: true,
/**
* Default expiration time (in seconds) for prerender functions.
* Defaults to 86400 seconds (24h).
*/
expiration: 86400,
/**
* Also known as Server Side Generation, or SSG.
* If present, this function is responsible to create static files in `.vercel/output/static`.
* Defaults to `false`, which disables prerendering.
*/
prerender(resolvedConfig) {
// Check `/packages/vike/vike.ts` `prerender` for an example
},
/**
* See https://vercel.com/docs/projects/project-configuration#rewrites
*/
rewrites: [{ source: '/about', destination: '/about-our-company.html' }],
/**
* See https://vercel.com/docs/projects/project-configuration#redirects
*/
redirects: [
{ source: '/me', destination: '/profile.html', permanent: false },
],
/**
* See https://vercel.com/docs/projects/project-configuration#cleanurls
*/
cleanUrls: true,
/**
* See https://vercel.com/docs/projects/project-configuration#trailingslash
*/
trailingSlash: true,
/**
* By default, all `api/*` and `_api/*` endpoints are compiled under `.vercel/output/functions/api/*.func`.
* If others serverless functions need to be compiled under `.vercel/output/functions`, they should be added here.
* For instance, a framework can leverage this to have a generic ssr endpoint
* without requiring the user to write any code.
*/
additionalEndpoints: [
{
// can also be an Object representing an esbuild StdinOptions
source: '/path/to/file.ts',
// URL path of the handler, will be generated to `.vercel/output/functions/api/file.func/index.js`
destination: '/api/file',
},
],
/**
* Advanced configuration to override .vercel/output/config.json
* See https://vercel.com/docs/build-output-api/v3/configuration#configuration
*/
config: {
// routes?: Route[];
// images?: ImagesConfig;
// wildcard?: WildcardConfig;
// overrides?: OverrideConfig;
// cache?: string[];
// crons?: CronsConfig;
},
/**
* ISR and SSG pages are mutually exclusive. If a page is found in both, ISR prevails.
* Keys are path relative to .vercel/output/functions directory, either without extension,
* or with `.prerender-config.json` extension.
* If you have multiple isr configurations pointing to the same underlying function, you can leverage the `symlink`
* property.
*
* Can be an object or a function returning an object (or a Promise of an object).
*
* Check `/packages/vike/vike.ts` `vitePluginVercelVpsIsrPlugin` for advanced usage.
*/
isr: {
// `symlink: 'ssr_'` means that a function is available under `.vercel/output/functions/ssr_.func`
'/pages/a': { expiration: 15, symlink: 'ssr_', route: '^/a/.*$' },
'/pages/b/c': { expiration: 15, symlink: 'ssr_', route: '^/b/c/.*$' },
'/pages/d': { expiration: 15, symlink: 'ssr_', route: '^/d$' },
'/pages/e': { expiration: 25 },
},
/**
* Defaults to `.vercel/output`. Mostly useful for testing purpose
*/
outDir: '.vercel/output',
},
});
Details
- vite-plugin-vercel
- clearyai
- 5 months ago
- MIT
- 18 dependencies
Assets
- vite-plugin-vercel-6.2.0-dev.2.tgz
Download activity
- Total downloads 6
- Last 30 days 0
- Last week 0
- Today 0