Bundler Integration

Installation

npm

npm i -D unplugin-vue-macros

yarn

yarn add -D unplugin-vue-macros

pnpm

pnpm add -D unplugin-vue-macros

Vite (first-class support)

// vite.config.ts
import VueMacros from 'unplugin-vue-macros/vite'
import Vue from '@vitejs/plugin-vue'
// import VueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [
    VueMacros({
      plugins: {
        vue: Vue(),
        // vueJsx: VueJsx(), // if needed
      },
    }),
  ],
})

Rollup (first-class support)

// rollup.config.js
import Vue from 'unplugin-vue/rollup'
import VueMacros from 'unplugin-vue-macros/rollup'

export default {
  plugins: [
    VueMacros({
      plugins: {
        vue: Vue(),
        // vueJsx: VueJsx(), // if needed
      },
    }),
  ],
}

esbuild

// esbuild.config.js
import { build } from 'esbuild'

build({
  plugins: [
    require('unplugin-vue-macros/esbuild')({
      plugins: {
        vue: require('unplugin-vue/esbuild')(),
        // vueJsx: VueJsx(), // if needed
      },
    }),
  ],
})

Webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [require('unplugin-vue-macros/webpack')({})],
}

Vue CLI

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
const VueMacros = require('unplugin-vue-macros/webpack')

module.exports = defineConfig({
  // ...
  // ⚠️ IMPORTANT
  parallel: false,
  configureWebpack: {
    plugins: [VueMacros({})],
  },
})

TypeScript Support

Vue 3

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["unplugin-vue-macros/macros-global" /* ... */]
  }
}

Vue 2

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["unplugin-vue-macros/vue2-macros-global" /* ... */]
  }
}

Volar Support

For detailed configuration, please refer to the description of the specific macro.

npm i -D @vue-macros/volar

// tsconfig.json
{
  "vueCompilerOptions": {
    "plugins": [
      "@vue-macros/volar/define-options",
      "@vue-macros/volar/define-models",
      "@vue-macros/volar/define-props",
      "@vue-macros/volar/define-props-refs",
      "@vue-macros/volar/short-vmodel",
      "@vue-macros/volar/define-slots",
      "@vue-macros/volar/jsx-directive",
      "@vue-macros/volar/setup-jsdoc",

      // Choose only one of the following
      // "@vue-macros/volar/export-expose",
      // "@vue-macros/volar/export-props",
      // "@vue-macros/volar/export-render",
    ],
    // ...
  },
}

Scoped Plugins

export-expose, export-props, and export-render plugins cannot be used at the same time unless providing a scope.

// tsconfig.json
{
  "vueCompilerOptions": {
    "plugins": [
      "@vue-macros/volar/export-render",
      "@vue-macros/volar/export-expose",
      "@vue-macros/volar/export-props",
    ],
    "vueMacros": {
      "exportExpose": {
        "include": ["**/export-expose/**"],
      },
      "exportProps": {
        "include": ["**/export-props/**"],
      },
      "exportRender": {
        "include": ["**/export-render/**"],
      },
    },
  },
}

---

🎉 Congratulations! You have successfully set up Vue Macros.

To learn more about the macros, please visit All Macros 😆.