webpack Integration

Pre-Release

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

Verter provides a webpack plugin through @verter/unplugin. It replaces vue-loader for compiling Vue Single File Components.

Installation

pnpm

pnpm add -D @verter/unplugin

npm

npm install -D @verter/unplugin

yarn

yarn add -D @verter/unplugin

Configuration

// webpack.config.js
const VerterWebpack = require("@verter/unplugin/webpack").default;

module.exports = {
  plugins: [VerterWebpack()],
};

Or with ES module syntax:

// webpack.config.ts
import VerterWebpack from "@verter/unplugin/webpack";

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

Style Loaders

Verter handles Vue SFC compilation, but you still need standard webpack loaders for CSS processing. Make sure you have the appropriate style loaders configured:

// webpack.config.js
const VerterWebpack = require("@verter/unplugin/webpack").default;

module.exports = {
  plugins: [VerterWebpack()],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      // Add loaders for preprocessors as needed:
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
};

HMR Behavior

When using webpack-dev-server, Verter supports Hot Module Replacement. The HMR strategy is automatically set to "webpack" when running under webpack, which uses webpack's built-in HMR API instead of Vite's.

Options

All options from the Vite integration guide are available:

• include -- File patterns to include
• componentId -- Custom component ID generator
• preCompile -- Pre-compile .vue files at build start
• crossFileOptimize -- Cross-file prop constness optimization
• template -- Template compiler options

const VerterWebpack = require("@verter/unplugin/webpack").default;

module.exports = {
  plugins: [
    VerterWebpack({
      preCompile: true,
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith("my-"),
        },
      },
    }),
  ],
};