SIGN IN SIGN UP
vitejs / vite UNCLAIMED

Next generation frontend tooling. It's fast!

0 0 0 TypeScript
2021-03-30 23:38:57 +02:00
# Using Plugins
Vite can be extended using plugins, which are based on Rollup's well-designed plugin interface with a few extra Vite-specific options. This means that Vite users can rely on the mature ecosystem of Rollup plugins, while also being able to extend the dev server and SSR functionality as needed.
<ScrimbaLink href="https://scrimba.com/intro-to-vite-c03p6pbbdq/~0y4g?via=vite" title="Using Plugins in Vite">Watch an interactive lesson on Scrimba</ScrimbaLink>
2021-03-30 23:38:57 +02:00
## Adding a Plugin
To use a plugin, it needs to be added to the `devDependencies` of the project and included in the `plugins` array in the `vite.config.js` config file. For example, to provide support for legacy browsers, the official [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) can be used:
```
$ npm add -D @vitejs/plugin-legacy
2021-03-30 23:38:57 +02:00
```
```js twoslash [vite.config.js]
2021-03-30 23:38:57 +02:00
import legacy from '@vitejs/plugin-legacy'
2021-07-27 17:00:51 +02:00
import { defineConfig } from 'vite'
2021-03-30 23:38:57 +02:00
2021-07-27 17:00:51 +02:00
export default defineConfig({
2021-03-30 23:38:57 +02:00
plugins: [
legacy({
targets: ['defaults', 'not IE 11'],
}),
],
2021-07-27 17:00:51 +02:00
})
2021-03-30 23:38:57 +02:00
```
2022-08-21 21:05:55 +02:00
`plugins` also accepts presets including several plugins as a single element. This is useful for complex features (like framework integration) that are implemented using several plugins. The array will be flattened internally.
2021-03-30 23:38:57 +02:00
Falsy plugins will be ignored, which can be used to easily activate or deactivate plugins.
## Finding Plugins
:::tip NOTE
Vite aims to provide out-of-the-box support for common web development patterns. Before searching for a Vite or compatible Rollup plugin, check out the [Features Guide](../guide/features.md). A lot of the cases where a plugin would be needed in a Rollup project are already covered in Vite.
:::
Check out the [Plugins section](../plugins/) for information about official plugins. Community plugins that are published to npm are listed in [Vite Plugin Registry](https://registry.vite.dev/plugins).
2021-03-30 23:38:57 +02:00
## Enforcing Plugin Ordering
For compatibility with some Rollup plugins, it may be needed to enforce the order of the plugin or only apply at build time. This should be an implementation detail for Vite plugins. You can enforce the position of a plugin with the `enforce` modifier:
- `pre`: invoke plugin before Vite core plugins
- default: invoke plugin after Vite core plugins
- `post`: invoke plugin after Vite build plugins
```js twoslash [vite.config.js]
2021-03-30 23:38:57 +02:00
import image from '@rollup/plugin-image'
2021-07-27 17:00:51 +02:00
import { defineConfig } from 'vite'
2021-03-30 23:38:57 +02:00
2021-07-27 17:00:51 +02:00
export default defineConfig({
2021-03-30 23:38:57 +02:00
plugins: [
{
...image(),
enforce: 'pre',
},
2021-03-30 23:38:57 +02:00
],
2021-07-27 17:00:51 +02:00
})
2021-03-30 23:38:57 +02:00
```
Check out [Plugins API Guide](./api-plugin.md#plugin-ordering) for detailed information.
2021-03-30 23:38:57 +02:00
## Conditional Application
By default, plugins are invoked for both serve and build. In cases where a plugin needs to be conditionally applied only during serve or build, use the `apply` property to only invoke them during `'build'` or `'serve'`:
```js twoslash [vite.config.js]
2021-03-30 23:38:57 +02:00
import typescript2 from 'rollup-plugin-typescript2'
2021-07-27 17:00:51 +02:00
import { defineConfig } from 'vite'
2021-03-30 23:38:57 +02:00
2021-07-27 17:00:51 +02:00
export default defineConfig({
2021-03-30 23:38:57 +02:00
plugins: [
{
...typescript2(),
apply: 'build',
},
2021-03-30 23:38:57 +02:00
],
2021-07-27 17:00:51 +02:00
})
2021-03-30 23:38:57 +02:00
```
## Building Plugins
Check out the [Plugins API Guide](./api-plugin.md) for documentation about creating plugins.