unplugin-vue
Version:
Transform Vue 3 SFC to JavaScript.
162 lines (115 loc) • 4.09 kB
Markdown
# unplugin-vue [](https://npmjs.com/package/unplugin-vue)
[](https://github.com/unplugin/unplugin-vue/actions/workflows/unit-test.yml)
Transform Vue 3 SFC to JavaScript.
## Features
- ⚡️ Support Vite, Webpack, Vue CLI, Rollup, esbuild and more, powered by [unplugin](https://github.com/unjs/unplugin).
- ✨ Support `<script setup>` and macros.
- 🔥 Hot module replacement (HMR) support for Vite.
- 🔄 Sync code from [@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue) periodically.
Currently based on [@vitejs/plugin-vue@6.0.0](https://github.com/vitejs/vite-plugin-vue/tree/plugin-vue@6.0.0/packages/plugin-vue).
## Installation
```bash
npm i -D unplugin-vue
```
<details>
<summary>Vite</summary><br>
```ts
// vite.config.ts
import Vue from 'unplugin-vue/vite'
export default defineConfig({
plugins: [Vue()],
})
```
<br></details>
<details>
<summary>Rollup</summary><br>
```ts
// rollup.config.js
import Vue from 'unplugin-vue/rollup'
export default {
plugins: [Vue()],
}
```
<br></details>
<details>
<summary>Rolldown</summary><br>
```ts
// rolldown.config.js
import Vue from 'unplugin-vue/rolldown'
export default {
plugins: [Vue()],
}
```
<br></details>
<details>
<summary>esbuild</summary><br>
```ts
import { build } from 'esbuild'
import Vue from 'unplugin-vue/esbuild'
build({
plugins: [Vue()],
})
```
<br></details>
<details>
<summary>Webpack</summary><br>
```js
// webpack.config.js
import Vue from 'unplugin-vue/webpack'
export default {
/* ... */
plugins: [Vue()],
}
```
<br></details>
<details>
<summary>Rspack</summary><br>
```ts
// rspack.config.js
import Vue from 'unplugin-vue/rspack'
export default {
/* ... */
plugins: [Vue()],
}
```
<br></details>
<details>
<summary>Farm</summary><br>
```ts
// farm.config.ts
import Vue from 'unplugin-vue/farm'
export default {
/* ... */
plugins: [Vue()],
}
```
<br></details>
### Limitations
⚠️ HMR is not supported for Webpack, Vue CLI, and Rspack.
## Who is using
- [Vue Macros](https://github.com/vue-macros/vue-macros) - Explore and extend more macros and syntax sugar to Vue.
- [Vue DevTools](https://github.com/vuejs/devtools) - ⚙️ Browser devtools extension for debugging Vue.js applications.
- [Element Plus icon](https://github.com/element-plus/element-plus-icons)
- [Onu UI](https://github.com/onu-ui/onu-ui) - Opinionated and lightweight UnoCSS ui library.
- [vue-components-lib-seed](https://github.com/zouhangwithsweet/vue-components-lib-seed) - A vue3.0 components library template.
## Alternatives
- [@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue) - For Vite and Vue 3.
- [@vitejs/plugin-vue2](https://github.com/vitejs/vite-plugin-vue2) - For Vite and Vue 2.
- [unplugin-vue2](https://github.com/unplugin/unplugin-vue2) - For Vue 2.7+ and Vite, esbuild, Rollup, Webpack or more.
- [vue-loader](https://github.com/vuejs/vue-loader) - For Webpack.
- [esbuild-plugin-vue](https://github.com/egoist/esbuild-plugin-vue) - For esbuild and Vue 3.
- [esbuild-vue](https://github.com/apeschar/esbuild-vue) - For esbuild and Vue 2.
- ~~[vite-plugin-vue2](https://github.com/underfin/vite-plugin-vue2) - For Vite and Vue 2.~~
- ~~[rollup-plugin-vue](https://github.com/vuejs/rollup-plugin-vue)~~ - ⚠️ no longer maintained.
## Thanks
- [Vite](https://github.com/vitejs/vite) - Next generation frontend tooling. It's fast!
- [unplugin](https://github.com/unjs/unplugin) - Unified plugin system for Vite, Rollup, Webpack, and more
- [vite-plugin-vue](https://github.com/vitejs/vite-plugin-vue) - This project is inherited from it.
## Sponsors
<p align="center">
<a href="https://cdn.jsdelivr.net/gh/sxzz/sponsors/sponsors.svg">
<img src='https://cdn.jsdelivr.net/gh/sxzz/sponsors/sponsors.svg'/>
</a>
</p>
## License
[MIT](./LICENSE) License © 2022-PRESENT [三咲智子](https://github.com/sxzz)