Other Bundlers

Pre-Release

Verter is pre-release software. APIs may change between releases — see the API Stability document.

Verter supports all major JavaScript bundlers through @verter/unplugin. This page covers Rollup, esbuild, rspack, Rolldown, and Farm. For Vite and webpack, see their dedicated guides:

• Vite Integration
• webpack Integration

All bundler plugins accept the same configuration options.

Installation

Install @verter/unplugin in your project:

pnpm

pnpm add -D @verter/unplugin

npm

npm install -D @verter/unplugin

yarn

yarn add -D @verter/unplugin

Rollup

// rollup.config.js
import VerterRollup from "@verter/unplugin/rollup";

export default {
  input: "src/main.js",
  plugins: [VerterRollup()],
  output: {
    dir: "dist",
    format: "es",
  },
};

You will likely also need @rollup/plugin-node-resolve and @rollup/plugin-replace for a working Vue build:

import { nodeResolve } from "@rollup/plugin-node-resolve";
import replace from "@rollup/plugin-replace";
import VerterRollup from "@verter/unplugin/rollup";

export default {
  input: "src/main.js",
  plugins: [
    replace({
      "process.env.NODE_ENV": JSON.stringify("production"),
      preventAssignment: true,
    }),
    nodeResolve(),
    VerterRollup(),
  ],
  output: {
    dir: "dist",
    format: "es",
  },
};

esbuild

// esbuild.config.js
import { build } from "esbuild";
import VerterEsbuild from "@verter/unplugin/esbuild";

await build({
  entryPoints: ["src/main.js"],
  bundle: true,
  outdir: "dist",
  plugins: [VerterEsbuild()],
});

rspack

// rspack.config.js
const VerterRspack = require("@verter/unplugin/rspack").default;

module.exports = {
  entry: "./src/main.js",
  plugins: [VerterRspack()],
};

rspack is API-compatible with webpack, so style loaders work the same way. See the webpack guide for CSS loader configuration.

Rolldown

// rolldown.config.js
import VerterRolldown from "@verter/unplugin/rolldown";

export default {
  input: "src/main.js",
  plugins: [VerterRolldown()],
  output: {
    dir: "dist",
    format: "es",
  },
};

Farm

// farm.config.js
import { defineConfig } from "@farmfe/core";
import VerterFarm from "@verter/unplugin/farm";

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

Options

All bundler plugins accept the same options. See the Vite configuration reference for the full list:

Option	Type	Default	Description
include	string | RegExp | (string | RegExp)[]	[/\.vue$/]	File patterns to include
componentId	(filename, source, isProd) => string	Hash-based	Custom component ID generator
preCompile	boolean	false	Pre-compile all .vue files at build start
crossFileOptimize	boolean	false	Cross-file prop constness optimization (requires preCompile)
template	object	--	Template compiler options