unplugin-vue

unplugin-vue

Transform Vue 3 SFC to JavaScript.

Features

• ⚡️ Support Vite, Webpack, Vue CLI, Rollup, esbuild and more, powered by unplugin.
• ✨ Support <script setup> and macros.
• 🔥 Hot module replacement (HMR) support for Vite.
• 🔄 Sync code from @vitejs/plugin-vue periodically. Currently based on @vitejs/plugin-vue@5.2.3.

Installation

npm i -D unplugin-vue

Vite

// vite.config.ts
import Vue from 'unplugin-vue/vite'

export default defineConfig({
  plugins: [Vue()],
})

Rollup

// rollup.config.js
import Vue from 'unplugin-vue/rollup'

export default {
  plugins: [Vue()],
}

Rolldown

// rolldown.config.js
import Vue from 'unplugin-vue/rolldown'

export default {
  plugins: [Vue()],
}

esbuild

import { build } from 'esbuild'
import Vue from 'unplugin-vue/esbuild'

build({
  plugins: [Vue()],
})

Webpack

// webpack.config.js
import Vue from 'unplugin-vue/webpack'

export default {
  /* ... */
  plugins: [Vue()],
}

Rspack

// rspack.config.js
import Vue from 'unplugin-vue/rspack'

export default {
  /* ... */
  plugins: [Vue()],
}

Farm

// farm.config.ts
import Vue from 'unplugin-vue/farm'

export default {
  /* ... */
  plugins: [Vue()],
}

Limitations

⚠️ HMR is not supported for Webpack, Vue CLI, and Rspack.

Who is using

• 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.

Alternatives

• @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.

Thanks

• 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.

Sponsors

License

MIT License © 2022-PRESENT 三咲智子