Skip to content

✨ Transform Vue 2.7+ SFC to JavaScript. Supports Vite, esbuild, Rollup and Webpack.

License

Notifications You must be signed in to change notification settings

unplugin/unplugin-vue2

Repository files navigation

unplugin-vue2

NPM version

💎 Features

  • ⚡️ Supports Vite, Webpack, Vue CLI, Rollup, esbuild and more, powered by unplugin.

📦 Installation

$ npm install unplugin-vue2 -D
$ yarn add unplugin-vue2 -D
$ pnpm add unplugin-vue2 -D

🚀 Usage

Vite
// vite.config.ts
import UnpluginVue2 from "unplugin-vue2/vite";

export default defineConfig({
	plugins: [
		UnpluginVue2({
			/* options */
		}),
	],
});


Rollup
// rollup.config.js
import UnpluginVue2 from "unplugin-vue2/rollup";

export default {
	plugins: [
		UnpluginVue2({
			/* options */
		}),
		// other plugins
	],
};


Webpack
// webpack.config.js
module.exports = {
	/* ... */
	plugins: [
		require("unplugin-vue2/webpack")({
			/* options */
		}),
	],
};


Vue CLI
// vue.config.js
module.exports = {
	configureWebpack: {
		plugins: [
			require("unplugin-vue2/webpack")({
				/* options */
			}),
		],
	},
};


Quasar
// quasar.conf.js [Vite]
module.exports = {
	vitePlugins: [
		[
			"unplugin-vue2/vite",
			{
				/* options */
			},
		],
	],
};
// quasar.conf.js [Webpack]
const UnpluginVue2Plugin = require("unplugin-vue2/webpack");

module.exports = {
	build: {
		chainWebpack(chain) {
			chain.plugin("unplugin-vue2").use(
				UnpluginVue2Plugin({
					/* options */
				}),
			);
		},
	},
};


esbuild
// esbuild.config.js
import { build } from "esbuild";

build({
	/* ... */
	plugins: [
		require("unplugin-vue2/esbuild")({
			/* options */
		}),
	],
});


👍 Alternatives

📚 Credits

  • Vite - Next generation frontend tooling. It's fast!
  • unplugin - Unified plugin system for Vite, Rollup, Webpack, and more

🙇‍ Thanks

Thanks to Vite. This project is inherited from @vitejs/[email protected]. Thanks to unplugin-vue for this idea (porting @vitejs/plugin-vue2 to unplugin).

📝 License

MIT. Made with ❤️ by Ray