VercelVercel
Menu

Vite on Vercel

Last updated December 18, 2025

Vite is an opinionated build tool that aims to provide a faster and leaner development experience for modern web projects. Vite provides a dev server with rich feature enhancements such as pre-bundling NPM dependencies and hot module replacement, and a build command that bundles your code and outputs optimized static assets for production.

These features make Vite more desirable than out-of-the-box CLIs when building larger projects with frameworks for many developers.

Vite powers popular frameworks like SvelteKit and Nuxt, and is often used in projects built with Vue, Svelte, React, Preact, Nitro, and more.

Getting started

To get started with Vite on Vercel:

  • If you already have a project with Vite, install Vercel CLI and run the vercelcommand from your project's root directory
  • Clone one of our Vite example repos to your favorite git provider and deploy it on Vercel with the button below:

Vercel deployments can integrate with your git provider to generate preview URLs for each pull request you make to your Vite project.

Environment Variables

Vercel provides a set of System Environment Variables that our platform automatically populates. For example, the VERCEL_GIT_PROVIDER variable exposes the Git provider that triggered your project's deployment on Vercel.

These environment variables will be available to your project automatically, and you can enable or disable them in your project settings on Vercel. See our Environment Variables docs to learn how.

To access Vercel's System Environment Variables in Vite during the build process, prefix the variable name with VITE. For example, VITE_VERCEL_ENV will return preview, production, or development depending on which environment the app is running in.

The following example demonstrates a Vite config file that sets VITE_VERCEL_ENV as a global constant available throughout the app:

vite.config.js
export default defineConfig(() => {
  return {
    define: {
      __APP_ENV__: process.env.VITE_VERCEL_ENV,
    },
  };
});
vite.config.ts
export default defineConfig(() => {
  return {
    define: {
      __APP_ENV__: process.env.VITE_VERCEL_ENV,
    },
  };
});

If you want to read environment variables from a .env file, additional configuration is required. See the Vite config docs to learn more.

To summarize, the benefits of using System Environment Variables with Vite on Vercel include:

  • Access to Vercel deployment information, dynamically or statically, with our preconfigured System Environment Variables
  • Access to automatically-configured environment variables provided by integrations for your preferred services
  • Searching and filtering environment variables by name and environment in Vercel's dashboard

Learn more about System Environment Variables

Vercel Functions

Vercel Functions scale up and down their resource consumption based on traffic demands. This scaling prevents them from failing during peak hours, but keeps them from running up high costs during periods of low activity.

If you're using a framework built on Vite, check that framework's official documentation or our dedicated framework docs. Some frameworks built on Vite, such as SvelteKit, support Functions natively. We recommend using that framework's method for implementing Functions.

If you're not using a framework or plugin that supports Vercel Functions, you can add Nitro to your Vite project to add a comprehensive backend to your project. Learn more about building full-stack Vite projects with Nitro.

To summarize, Vercel Functions on Vercel:

  • Scales to zero when not in use
  • Scales automatically with traffic increases
  • Support standard Web APIs, such as URLPattern, Response, and more

Learn more about Vercel Functions

Server-Side Rendering (SSR)

Server-Side Rendering (SSR) allows you to render pages dynamically on the server. This is useful for pages where the rendered data needs to be unique on every request. For example, checking authentication or looking at the location of an incoming request.

We recommend using Nitro to add SSR to your Vite project.

To summarize, SSR with Vite on Vercel:

  • Scales to zero when not in use
  • Scales automatically with traffic increases
  • Has zero-configuration support for Cache-Control headers, including stale-while-revalidate

Learn more about SSR with Nitro

Using Vite to make SPAs

If your Vite app is configured to deploy as a Single Page Application (SPA), deep linking won't work out of the box.

To enable deep linking in SPA Vite apps, create a vercel.json file at the root of your project, and add the following code:

vercel.json
{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

If cleanUrls is set to true in your project's vercel.json, do not include the file extension in the source or destination path. For example, /index.html would be /

Deploying your app in Multi-Page App mode is recommended for production builds.

Learn more about Multi-Page App mode in the Vite docs.

More benefits

See our Frameworks documentation page to learn about the benefits available to all frameworks when you deploy on Vercel.

More resources

Learn more about deploying Vite projects on Vercel with the following resources:

Was this helpful?

supported.