Transform Vue 3 SFC to JavaScript.
npm install unplugin-vue[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Unit Test][unit-test-src]][unit-test-href]
Transform Vue 3 SFC to JavaScript.
- ⚡️ Support Vite, Webpack, Vue CLI, Rollup, esbuild and more, powered by unplugin.
- ✨ Support and macros.
- 🔥 Hot module replacement (HMR) support for Vite.
- 🔄 Sync code from @vitejs/plugin-vue periodically.
Currently based on @vitejs/plugin-vue@6.0.3.
``bash`
npm i -D unplugin-vue
Vite
`ts
// vite.config.ts
import Vue from 'unplugin-vue/vite'
export default defineConfig({
plugins: [Vue()],
})
`
Rollup
`ts
// rollup.config.js
import Vue from 'unplugin-vue/rollup'
export default {
plugins: [Vue()],
}
`
Rolldown / tsdown
`ts
// rolldown.config.js / tsdown.config.ts
import Vue from 'unplugin-vue/rolldown'
export default {
plugins: [Vue()],
}
`
esbuild
`ts
import { build } from 'esbuild'
import Vue from 'unplugin-vue/esbuild'
build({
plugins: [Vue()],
})
`
Webpack
`js
// webpack.config.js
import Vue from 'unplugin-vue/webpack'
export default {
/ ... /
plugins: [Vue()],
}
`
Rspack
`ts
// rspack.config.js
import Vue from 'unplugin-vue/rspack'
export default {
/ ... /
plugins: [Vue()],
}
`
Farm
`ts
// farm.config.ts
import Vue from 'unplugin-vue/farm'
export default {
/ ... /
plugins: [Vue()],
}
``
⚠️ HMR is not supported for Webpack, Vue CLI, and Rspack.
- Vue Macros - Explore and extend more macros and syntax sugar to Vue.
- Vue DevTools - ⚙️ Browser devtools extension for debugging Vue.js applications.
- Element Plus icon
- Onu UI - Opinionated and lightweight UnoCSS ui library.
- vue-components-lib-seed - A vue3.0 components library template.
- @vitejs/plugin-vue - For Vite and Vue 3.
- @vitejs/plugin-vue2 - For Vite and Vue 2.
- unplugin-vue2 - For Vue 2.7+ and Vite, esbuild, Rollup, Webpack or more.
- vue-loader - For Webpack.
- esbuild-plugin-vue - For esbuild and Vue 3.
- esbuild-vue - For esbuild and Vue 2.
- ~~vite-plugin-vue2 - For Vite and Vue 2.~~
- ~~rollup-plugin-vue~~ - ⚠️ no longer maintained.
- Vite - Next generation frontend tooling. It's fast!
- unplugin - Unified plugin system for Vite, Rollup, Webpack, and more
- vite-plugin-vue - This project is inherited from it.
MIT License © 2021-PRESENT Kevin Deng
[npm-version-src]: https://img.shields.io/npm/v/unplugin-vue.svg
[npm-version-href]: https://npmjs.com/package/unplugin-vue
[npm-downloads-src]: https://img.shields.io/npm/dm/unplugin-vue
[npm-downloads-href]: https://www.npmcharts.com/compare/unplugin-vue?interval=30
[unit-test-src]: https://github.com/unplugin/unplugin-vue/actions/workflows/unit-test.yml/badge.svg
[unit-test-href]: https://github.com/unplugin/unplugin-vue/actions/workflows/unit-test.yml