@vizejs/unplugin

@vizejs/unplugin

Experimental unplugin-based Vue SFC integration powered by Vize.

[!WARNING] @vizejs/unplugin is still unstable. @vizejs/vite-plugin remains the recommended and best-tested bundler integration today.

@vizejs/unplugin provides experimental support for:

• rollup
• rolldown
• webpack
• esbuild
• babel

Rspack intentionally uses the dedicated @vizejs/rspack-plugin path instead of an unplugin export because its loader chain, experiments.css, and HMR behavior need Rspack-specific handling.

Installation

Install vp once from the Vite+ install guide, then add the package:

vp install @vizejs/unplugin

Usage

rollup

import vize from "@vizejs/unplugin/rollup";

export default {
  plugins: [vize()],
};

webpack

import Vize from "@vizejs/unplugin/webpack";

export default {
  plugins: [Vize()],
};

Webpack 5 is detected through compiler.webpack. Webpack 4 is supported by resolving DefinePlugin from the host project's webpack package:

import Vize from "@vizejs/unplugin/webpack";

export default {
  plugins: [
    Vize({
      compatibility: {
        webpackVersion: 4,
      },
    }),
  ],
};

For Vue 0.11, Vue 1, Vue 2, or Nuxt 2 projects that already use the legacy Vue/Webpack compiler chain, keep Vize non-invasive and let the host compiler handle .vue files:

Vize({
  compatibility: {
    vueVersion: 2,
    webpackVersion: 4,
  },
});

rolldown

import vize from "@vizejs/unplugin/rolldown";

export default {
  plugins: [vize()],
};

esbuild

import { build } from "esbuild";
import vize from "@vizejs/unplugin/esbuild";

await build({
  entryPoints: ["src/main.ts"],
  bundle: true,
  plugins: [vize()],
});

babel

import vize from "@vizejs/unplugin/babel";

export default {
  plugins: [vize()],
};

The Babel adapter compiles .vue files before Babel parses them. Keep your usual Babel TypeScript/JSX transforms in the pipeline if your SFC scripts use those syntaxes.

Caveats

• Vite is still the recommended integration if you need the most complete behavior today.
• CSS Modules and preprocessors depend on the host bundler CSS pipeline and are more likely to change than the Vite path.
• Scoped preprocessor styles are compiled before they are scoped, as in Vue: Webpack uses your .scss/.less/.styl rules, while Rollup, Rolldown and esbuild run the project's installed sass (or sass-embedded), less or stylus.
• If your bundler inlines the Vue runtime, Vize injects the usual Vue 3 compile-time feature flags for Rollup-like and Webpack hosts when its compiler is active.
• Test carefully before depending on this package in production.