Getting Started

  • A dev server that provides over native ES modules, for example extremely fast .

  • A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

Vite is opinionated and comes with sensible defaults out of the box, but is also highly extensible via its and JavaScript API with full typing support.

You can learn more about the rationale behind the project in the section.

Browser Support

  • For production: the default build targets browsers that support . Legacy browsers can be supported via the official @vitejs/plugin-legacy - see the section for more details.

Compatibility Note

Vite requires Node.js version >=12.0.0.

With Yarn:

  1. $ yarn create @vitejs/app

Then follow the prompts!

You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a Vite + Vue project, run:

Supported template presets include:

  • vanilla
  • vue
  • vue-ts
  • react
  • react-ts
  • preact
  • preact-ts
  • lit-element
  • lit-element-ts
  • svelte-ts

See for more details on each template.

Community Templates

@vitejs/create-app is a tool to quickly start a project from a basic template for popular frameworks. Check out Awesome Vite for that include other tools or target different frameworks. You can use a tool like degit to scaffold your project with one of the templates.

  1. npx degit user/project my-project
  2. cd my-project
  4. npm install
  5. npm run dev

If the project uses main as the default branch, suffix the project repo with #main

One thing you may have noticed is that in a Vite project, index.html is front-and-central instead of being tucked away inside public. This is intentional: during development Vite is a server, and index.html is the entry point to your application.

Similar to static http servers, Vite has the concept of a “root directory” which your files are served from. You will see it referenced as <root> throughout the rest of the docs. Absolute URLs in your source code will be resolved using the project root as base, so you can write code as if you are working with a normal static file server (except way more powerful!). Vite is also capable of handling dependencies that resolve to out-of-root file system locations, which makes it usable even in a monorepo-based setup.

Vite also supports with multiple entry points.

Specifying Alternative Root

Running vite starts the dev server using the current working directory as root. You can specify an alternative root with vite serve some/sub/dir.

Command Line Interface

In a project where Vite is installed, you can use the vite binary in your npm scripts, or run it directly with npx vite. Here is the default npm scripts in a scaffolded Vite project:

  1. {
  2.   "scripts": {
  3.     "dev": "vite", // start dev server
  4.     "build": "vite build", // build for production
  5.     "serve": "vite preview" // locally preview production build
  6. }

You can specify additional CLI options like --port or --https. For a full list of CLI options, run npx vite --help in your project.

If you can’t wait for a new release to test the latest features, you will need to clone the vite repo to your local machine and then build and link it yourself ( is required):

Then go to your vite based project and run yarn link vite. Now restart the development server () to ride on the bleeding edge!

Community

If you have questions or need help, reach out to the community at and GitHub Discussions.