Vite

https://vite.dev/guide
Admin
Vite is a fast and lean build tool that provides an enhanced development server with Hot Module...
Tokens:59,203
Snippets:761
Trust Score:9.9
Update:4 months ago
Show doc for...
Tokens:
Raw
### Run Vite dev server with Bun

Source: https://vite.dev/guide

Command to start the Vite development server using Bun.

```bash
$ bunx vite
```

--------------------------------

### Basic index.html for Vite

Source: https://vite.dev/guide

A minimal index.html file to be served by Vite.

```html
<p>Hello Vite!</p>
```

--------------------------------

### Install Vite CLI with Bun

Source: https://vite.dev/guide

Command to install Vite as a development dependency using Bun.

```bash
$ bun add -D vite
```

--------------------------------

### Run Vite dev server with Deno

Source: https://vite.dev/guide

Command to start the Vite development server using Deno.

```bash
$ deno run -A npm:vite
```

--------------------------------

### Install Vite CLI with Deno

Source: https://vite.dev/guide

Command to install Vite as a development dependency using Deno.

```bash
$ deno add -D npm:vite
```

--------------------------------

### Install Unreleased Vite using npm, Yarn, pnpm, or Bun

Source: https://vite.dev/guide

Examples of installing a specific commit of Vite using package managers via pkg.pr.new.

```bash
$ npm install -D https://pkg.pr.new/vite@SHA
```

```bash
$ yarn add -D https://pkg.pr.new/vite@SHA
```

```bash
$ pnpm add -D https://pkg.pr.new/vite@SHA
```

```bash
$ bun add -D https://pkg.pr.new/vite@SHA
```

--------------------------------

### Create Vite project with Bun

Source: https://vite.dev/guide

Command to create a new Vite project using Bun.

```bash
$ bun create vite my-vue-app --template vue
```

--------------------------------

### Create Vite project with Deno

Source: https://vite.dev/guide

Command to create a new Vite project using Deno.

```bash
$ deno init --npm vite my-vue-app --template vue
```

--------------------------------

### Run Vite dev server with npm

Source: https://vite.dev/guide

Command to start the Vite development server using npm.

```bash
$ npx vite
```

--------------------------------

### Build and Link Vite from Source

Source: https://vite.dev/guide

Steps to clone the Vite repository, build it locally, and link it to a project.

```bash
git clone https://github.com/vitejs/vite.git
cd vite
pnpm install
cd packages/vite
pnpm run build
pnpm link # use your preferred package manager for this step
```

--------------------------------

### Run Vite dev server with Yarn

Source: https://vite.dev/guide

Command to start the Vite development server using Yarn.

```bash
$ yarn vite
```

--------------------------------

### Install Vite CLI with Yarn

Source: https://vite.dev/guide

Command to install Vite as a development dependency using Yarn.

```bash
$ yarn add -D vite
```

--------------------------------

### Run Vite dev server with pnpm

Source: https://vite.dev/guide

Command to start the Vite development server using pnpm.

```bash
$ pnpm vite
```

--------------------------------

### Install Vite CLI with pnpm

Source: https://vite.dev/guide

Command to install Vite as a development dependency using pnpm.

```bash
$ pnpm add -D vite
```

--------------------------------

### Scaffolding Your First Vite Project

Source: https://vite.dev/guide

Commands to create a new Vite project using different package managers.

```bash
$ npm create vite@latest
```

```bash
$ yarn create vite
```

```bash
$ pnpm create vite
```

```bash
$ bun create vite
```

```bash
$ deno init --npm vite
```

--------------------------------

### Default npm scripts in package.json

Source: https://vite.dev/guide

Example of default npm scripts for Vite projects, including dev, build, and preview commands.

```json
{
  "scripts": {
    "dev": "vite", // start dev server, aliases: `vite dev`, `vite serve`
    "build": "vite build", // build for production
    "preview": "vite preview" // locally preview production build
  }
}
```

--------------------------------

### Scaffold project with tiged

Source: https://vite.dev/guide

Commands to scaffold a project using tiged, install dependencies, and run the development server.

```bash
npx tiged user/project my-project
cd my-project

npm install
npm run dev
```

--------------------------------

### Install Vite CLI with npm

Source: https://vite.dev/guide

Command to install Vite as a development dependency using npm.

```bash
$ npm install -D vite
```

--------------------------------

### Create Vite project with Yarn

Source: https://vite.dev/guide

Command to create a new Vite project using Yarn.

```bash
$ yarn create vite my-vue-app --template vue
```

--------------------------------

### Create Vite project with pnpm

Source: https://vite.dev/guide

Command to create a new Vite project using pnpm.

```bash
$ pnpm create vite my-vue-app --template vue
```

--------------------------------

### Preview API Example

Source: https://vite.dev/guide/api-javascript

Example of how to use the `preview` function to start a preview server.

```javascript
import { preview } from 'vite'

const previewServer = await preview({
  // any valid user config options, plus `mode` and `configFile`
  preview: {
    port: 8080,
    open: true,
  },
})

previewServer.printUrls()
previewServer.bindCLIShortcuts({ print: true })
```

--------------------------------

### configurePreviewServer Example

Source: https://vite.dev/guide/api-plugin

Example of using configurePreviewServer to inject a middleware after other middlewares are installed.

```javascript
const myPlugin = () => ({
  name: 'configure-preview-server',
  configurePreviewServer(server) {
    // return a post hook that is called after other middlewares are
    // installed
    return () => {
      server.middlewares.use((req, res, next) => {
        // custom handle request...
      })
    }
  },
})
```

--------------------------------

### Scaffolding a Vite + Vue project

Source: https://vite.dev/guide

Command to scaffold a Vite project with Vue template using npm.

```bash
npm create vite@latest my-vue-app --template vue
```

--------------------------------

### HTML entry point example

Source: https://vite.dev/guide/features

Example of an HTML file serving as an entry point for a Vite project, demonstrating the processing of assets referenced by HTML elements.

```html
<!doctype html>
<html>
  <head>
    <link rel="icon" href="/favicon.ico" />
    <link rel="stylesheet" href="/src/styles.css" />
  </head>
  <body>
    <img src="/src/images/logo.svg" alt="logo" />
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
```

--------------------------------

### SWC Plugin for Decorators (Deno)

Source: https://vite.dev/guide/migration

Install SWC plugin for decorators using Deno.

```bash
$ deno add -D npm:@rollup/plugin-swc npm:@swc/core
```

--------------------------------

### createServer Example

Source: https://vite.dev/guide/api-javascript

Example usage of the createServer function to start a Vite development server.

```typescript
import { createServer } from 'vite'

const server = await createServer({
  // any valid user config options, plus `mode` and `configFile`
  configFile: false,
  root: import.meta.dirname,
  server: {
    port: 1337,
  },
})
await server.listen()

server.printUrls()
server.bindCLIShortcuts({ print: true })
```

--------------------------------

### SWC Plugin for Decorators (npm)

Source: https://vite.dev/guide/migration

Install SWC plugin for decorators using npm.

```bash
$ npm install -D @rollup/plugin-swc @swc/core
```

--------------------------------

### SWC Plugin for Decorators (Bun)

Source: https://vite.dev/guide/migration

Install SWC plugin for decorators using Bun.

```bash
$ bun add -D @rollup/plugin-swc @swc/core
```

--------------------------------

### Babel Plugin for Decorators (Deno)

Source: https://vite.dev/guide/migration

Install Babel plugin for decorators using Deno.

```bash
$ deno add -D npm:@rolldown/plugin-babel npm:@babel/plugin-proposal-decorators
```

--------------------------------

### Babel Plugin for Decorators (Bun)

Source: https://vite.dev/guide/migration

Install Babel plugin for decorators using Bun.

```bash
$ bun add -D @rolldown/plugin-babel @babel/plugin-proposal-decorators
```

--------------------------------

### configureServer hook example: injecting post middleware

Source: https://vite.dev/guide/api-plugin

Example showing how to return a function from `configureServer` to inject a middleware after internal middlewares have been installed.

```javascript
const myPlugin = () => ({
  name: 'configure-server',
  configureServer(server) {
    // return a post hook that is called after internal middlewares are
    // installed
    return () => {
      server.middlewares.use((req, res, next) => {
        // custom handle request...
      })
    }
  },
})
```

--------------------------------

### Custom Environment Instance Example

Source: https://vite.dev/guide/api-environment

Example using the customEnvironment provider for a Cloudflare Workers runtime.

```js
import { customEnvironment } from 'vite-environment-provider'

export default {
  build: {
    outDir: '/dist/client',
  },
  environments: {
    ssr: customEnvironment({
      build: {
        outDir: '/dist/ssr',
      },
    }),
  },
}
```

--------------------------------

### SWC Plugin for Decorators (pnpm)

Source: https://vite.dev/guide/migration

Install SWC plugin for decorators using pnpm.

```bash
$ pnpm add -D @rollup/plugin-swc @swc/core
```

--------------------------------

### Babel Plugin for Decorators (npm)

Source: https://vite.dev/guide/migration

Install Babel plugin for decorators using npm.

```bash
$ npm install -D @rolldown/plugin-babel @babel/plugin-proposal-decorators
```

--------------------------------

### Using a virtual module to run code in the same runtime

Source: https://vite.dev/guide/api-environment-frameworks

This example demonstrates how to use a virtual module to run code in the same runtime as user modules, avoiding the need to access values via Vite's APIs. It shows the setup of a Vite server and the execution of an entrypoint.

```typescript
import { createServer } from 'vite'

const server = createServer({
  plugins: [
    // a plugin that handles `virtual:entrypoint`
    {
      name: 'virtual-module',
      /* plugin implementation */
    },
  ],
})
const ssrEnvironment = server.environment.ssr
const input = {}

// use exposed functions by each environment factories that runs the code
// check for each environment factories what they provide
if (ssrEnvironment instanceof CustomDevEnvironment) {
  ssrEnvironment.runEntrypoint('virtual:entrypoint')
} else {
  throw new Error(`Unsupported runtime for ${ssrEnvironment.name}`)
}

// -------------------------------------
// virtual:entrypoint
const { createHandler } = await import('./entrypoint.js')
const handler = createHandler(input)
const response = handler(new Request('http://example.com/'))

// -------------------------------------
// ./entrypoint.js
export function createHandler(input) {
  return function handler(req) {
    return new Response('hello')
  }
}
```

--------------------------------

### Babel Plugin for Decorators (pnpm)

Source: https://vite.dev/guide/migration

Install Babel plugin for decorators using pnpm.

```bash
$ pnpm add -D @rolldown/plugin-babel @babel/plugin-proposal-decorators
```

--------------------------------

### Log Oxc Configuration

Source: https://vite.dev/guide/migration

Example of how to log the Oxc configuration options from the `configResolved` hook.

```javascript
const plugin = {
  name: 'log-config',
  configResolved(config) {
    console.log('options', config.oxc)
  },
}
```

--------------------------------

### UnoCssPlugin example

Source: https://vite.dev/guide/api-environment-plugins

Example of a plugin defining its environment applicability with applyToEnvironment.

```javascript
const UnoCssPlugin = () => {
  // shared global state
  return {
    buildStart() {
      // init per-environment state with WeakMap<Environment,Data>
      // using this.environment
    },
    configureServer() {
      // use global hooks normally
    },
    applyToEnvironment(environment) {
      // return true if this plugin should be active in this environment,
      // or return a new plugin to replace it.
      // if the hook is not used, the plugin is active in all environments
    },
    resolveId(id, importer) {
      // only called for environments this plugin apply to
    },
  }
}
```

--------------------------------

### lib/main.js

Source: https://vite.dev/guide/build

Example entry file for a library, exporting components.

```js
import Foo from './Foo.vue'
import Bar from './Bar.vue'
export { Foo, Bar }
```

--------------------------------

### Configure preview port in package.json

Source: https://vite.dev/guide/static-deploy

Example of configuring the port for the `vite preview` command in package.json.

```json
{
  "scripts": {
    "preview": "vite preview --port 8080"
  }
}
```

--------------------------------

### Creating and Using FetchableDevEnvironment

Source: https://vite.dev/guide/api-environment-frameworks

Example demonstrating how to create a custom environment using `createFetchableDevEnvironment` and how to dispatch fetches to it.

```typescript
import {
  createServer,
  createFetchableDevEnvironment,
  isFetchableDevEnvironment,
} from 'vite'

const server = await createServer({
  server: { middlewareMode: true },
  appType: 'custom',
  environments: {
    custom: {
      dev: {
        createEnvironment(name, config) {
          return createFetchableDevEnvironment(name, config, {
            handleRequest(request: Request): Promise<Response> | Response {
              // handle Request and return a Response
            },
          })
        },
      },
    },
  },
})

// Any consumer of the environment API can now call `dispatchFetch`
if (isFetchableDevEnvironment(server.environments.custom)) {
  const response: Response = await server.environments.custom.dispatchFetch(
    new Request('http://example.com/request-to-handle'),
  )
}
```

--------------------------------

### package.json (multiple entries)

Source: https://vite.dev/guide/build

Recommended package.json configuration for a library with multiple entry points.

```json
{
  "name": "my-lib",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/my-lib.cjs",
  "module": "./dist/my-lib.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.js",
      "require": "./dist/my-lib.cjs"
    },
    "./secondary": {
      "import": "./dist/secondary.js",
      "require": "./dist/secondary.cjs"
    }
  }
}
```

--------------------------------

### Create Vite project with npm

Source: https://vite.dev/guide

Command to create a new Vite project using npm, specifying the Vue template. Note the extra double-dash required for npm 7+.

```bash
$ npm create vite@latest my-vue-app -- --template vue
```

--------------------------------

### Test the app locally command

Source: https://vite.dev/guide/static-deploy

Command to preview the production build locally.

```bash
$ npm run preview
```

--------------------------------

### Using perEnvironmentPlugin helper

Source: https://vite.dev/guide/api-environment-plugins

Simplified example using the perEnvironmentPlugin helper.

```javascript
import { nonShareablePlugin } from 'non-shareable-plugin'

export default defineConfig({
  plugins: [
    perEnvironmentPlugin('per-environment-plugin', (environment) =>
      nonShareablePlugin({ outputName: environment.name }),
    ),
  ],
})
```

--------------------------------

### Build the app command

Source: https://vite.dev/guide/static-deploy

Command to build the Vite application for production.

```bash
$ npm run build
```

--------------------------------

### Dynamic Import Example

Source: https://vite.dev/guide/features

Basic example of dynamic import with variables.

```typescript
const module = await import(`./dir/${file}.js`)
```

--------------------------------

### Installing CSS Pre-processors

Source: https://vite.dev/guide/features

Commands to install Sass, Less, and Stylus for Vite.

```bash
# .scss and .sass
npm add -D sass-embedded # or sass

# .less
npm add -D less

# .styl and .stylus
npm add -D stylus
```

--------------------------------

### package.json with CSS export

Source: https://vite.dev/guide/build

Example package.json configuration exporting a CSS file for library users.

```json
{
  "name": "my-lib",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/my-lib.umd.cjs",
  "module": "./dist/my-lib.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.js",
      "require": "./dist/my-lib.umd.cjs"
    },
    "./style.css": "./dist/my-lib.css"
  }
}
```

--------------------------------

### Bare Module Import Example

Source: https://vite.dev/guide/features

An example of a bare module import that will cause an error in the browser without Vite's intervention.

```javascript
import { someMethod } from 'my-dep'
```

--------------------------------

### package.json (single entry)

Source: https://vite.dev/guide/build

Recommended package.json configuration for a library with a single entry point.

```json
{
  "name": "my-lib",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/my-lib.umd.cjs",
  "module": "./dist/my-lib.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.js",
      "require": "./dist/my-lib.umd.cjs"
    }
  }
}
```

--------------------------------

### esmExternalRequirePlugin Configuration

Source: https://vite.dev/guide/migration

Example of configuring the esmExternalRequirePlugin to handle external require calls.

```js
import { defineConfig, esmExternalRequirePlugin } from 'vite'

export default defineConfig({
  // ...
  plugins: [
    esmExternalRequirePlugin({
      external: ['react', 'vue', /^node:/],
    }),
  ],
})
```

--------------------------------

### Example HTML Template for Rendering Links

Source: https://vite.dev/guide/backend-integration

An illustrative HTML template demonstrating how to render CSS and script tags using the Vite manifest file. This syntax is for explanation and should be adapted to a server templating language.

```html
<!-- if production -->

<!-- for cssFile of manifest[name].css -->
<link rel="stylesheet" href="/{{ cssFile }}" />

<!-- for chunk of importedChunks(manifest, name) -->
<!-- for cssFile of chunk.css -->
<link rel="stylesheet" href="/{{ cssFile }}" />

<script type="module" src="/{{ manifest[name].file }}"></script>

<!-- for chunk of importedChunks(manifest, name) -->
<link rel="modulepreload" href="/{{ chunk.file }}" />
```

--------------------------------

### SWC Plugin for Decorators (Yarn)

Source: https://vite.dev/guide/migration

Install SWC plugin for decorators using Yarn.

```bash
$ yarn add -D @rollup/plugin-swc @swc/core
```

--------------------------------

### vite.config.js example

Source: https://vite.dev/guide/api-environment-frameworks

Example of configuring the `builder.buildApp` option in `vite.config.js` to build all configured environments in parallel.

```javascript
import { defineConfig } from 'vite'

export default defineConfig({
  builder: {
    buildApp: async (builder) => {
      const environments = Object.values(builder.environments)
      await Promise.all(
        environments.map((environment) => builder.build(environment)),
      )
    },
  },
})
```

--------------------------------

### Client-side Access Example

Source: https://vite.dev/guide/env-and-mode

This example shows how to access the exposed VITE_SOME_KEY and the non-exposed DB_PASSWORD in client-side code.

```js
console.log(import.meta.env.VITE_SOME_KEY) // "123"
console.log(import.meta.env.DB_PASSWORD) // undefined
```

--------------------------------

### Importing WebAssembly with ?init

Source: https://vite.dev/guide/features

Demonstrates how to import a WebAssembly file and initialize it, returning a Promise of the WebAssembly.Instance.

```javascript
import 'vite/client'
// ---cut---
import init from './example.wasm?init'

init().then((instance) => {
  instance.exports.test()
})
```

--------------------------------

### Babel Plugin for Decorators (Yarn)

Source: https://vite.dev/guide/migration

Install Babel plugin for decorators using Yarn.

```bash
$ yarn add -D @rolldown/plugin-babel @babel/plugin-proposal-decorators
```

--------------------------------

### Merge Config with Callback Example

Source: https://vite.dev/guide/api-javascript

Example demonstrating how to use `defineConfig` and `mergeConfig` to merge a configuration in callback form with another configuration.

```javascript
import {
  defineConfig,
  mergeConfig,
  type UserConfigFnObject,
  type UserConfig,
} from 'vite'
declare const configAsCallback: UserConfigFnObject
declare const configAsObject: UserConfig

// ---cut---
export default defineConfig((configEnv) =>
  mergeConfig(configAsCallback(configEnv), configAsObject),
)
```

--------------------------------

### Creating Module Workers

Source: https://vite.dev/guide/features

Example of creating a worker with the 'module' type option.

```typescript
const worker = new Worker(new URL('./worker.js', import.meta.url), {
  type: 'module',
})
```

--------------------------------

### Vite Build Usage

Source: https://vite.dev/guide/cli

Builds the project for production.

```bash
vite build [root]
```

--------------------------------

### Add @vitejs/plugin-legacy

Source: https://vite.dev/guide/using-plugins

Install the official @vitejs/plugin-legacy for legacy browser support.

```bash
$ npm add -D @vitejs/plugin-legacy
```

--------------------------------

### Example

Source: https://vite.dev/guide/env-and-mode

This example shows how to use the DEV constant to conditionally execute code in development mode.

```js
if (import.meta.env.DEV) {
  // code inside here will be tree-shaken in production builds
  console.log('Dev mode')
}
```

--------------------------------

### CSS Modules Example

Source: https://vite.dev/guide/features

Demonstrates importing a CSS module and applying its class to an HTML element.

```css
.red {
  color: red;
}
```

```javascript
import 'vite/client'
// ---cut---
import classes from './example.module.css'
document.getElementById('foo').className = classes.red
```

--------------------------------

### JSX Configuration with Preact

Source: https://vite.dev/guide/features

Example of configuring JSX for Preact using the `oxc` option in `vite.config.js`.

```javascript
import { defineConfig } from 'vite'

export default defineConfig({
  oxc: {
    jsx: {
      importSource: 'preact',
    },
  },
})
```

--------------------------------

### Example Vite Build Manifest

Source: https://vite.dev/guide/backend-integration

An example of the .vite/manifest.json file generated after running 'vite build'.

```json
{
  "_shared-B7PI925R.js": {
    "file": "assets/shared-B7PI925R.js",
    "name": "shared",
    "css": ["assets/shared-ChJ_j-JJ.css"]
  },
  "_shared-ChJ_j-JJ.css": {
    "file": "assets/shared-ChJ_j-JJ.css",
    "src": "_shared-ChJ_j-JJ.css"
  },
  "logo.svg": {
    "file": "assets/logo-BuPIv-2h.svg",
    "src": "logo.svg"
  },
  "baz.js": {
    "file": "assets/baz-B2H3sXNv.js",
    "name": "baz",
    "src": "baz.js",
    "isDynamicEntry": true
  },
  "views/bar.js": {
    "file": "assets/bar-gkvgaI9m.js",
    "name": "bar",
    "src": "views/bar.js",
    "isEntry": true,
    "imports": ["_shared-B7PI925R.js"],
    "dynamicImports": ["baz.js"]
  },
  "views/foo.js": {
    "file": "assets/foo-BRBmoGS9.js",
    "name": "foo",
    "src": "views/foo.js",
    "isEntry": true,
    "imports": ["_shared-B7PI925R.js"],
    "css": ["assets/foo-5UjPuW-k.css"]
  }
}
```

--------------------------------

### Handling BundleError in JS API

Source: https://vite.dev/guide/migration

Example of how to catch and process BundleError when using the build() function in the JS API.

```js
try {
  await build()
} catch (e) {
  if (e.errors) {
    for (const error of e.errors) {
      console.log(error.code) // error code
    }
  }
}
```

--------------------------------

### package.json scripts for build and preview

Source: https://vite.dev/guide/static-deploy

Defines the npm scripts for building the Vite application and previewing the production build locally.

```json
{
  "scripts": {
    "build": "vite build",
    "preview": "vite preview"
  }
}
```
Tokens:
Raw