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-'),
        },
      },
    }),
  ],
}