Bundler Integration

Installation

TIP

Vite and Rollup are fully supported, while other bundlers have limited support.

npmyarnpnpm

bash

npm i -D vue-macros

bash

yarn add -D vue-macros

bash

pnpm add -D vue-macros

ViteRollupesbuildWebpackRspackRsbuildVue CLI

// vite.config.ts import Vue from '@vitejs/plugin-vue' import VueMacros from 'vue-macros/vite' // import VueJsx from '@vitejs/plugin-vue-jsx' // import VueRouter from 'unplugin-vue-router/vite'  export default defineConfig({  plugins: [  VueMacros({  plugins: {  vue: Vue(),  // vueJsx: VueJsx(), // if needed  // vueRouter: VueRouter({ // if needed  // extensions: ['.vue', '.setup.tsx']  // })  },  // overrides plugin options  }),  ], })

// rollup.config.js (Requires Rollup 3+) import Vue from 'unplugin-vue/rollup' import VueMacros from 'vue-macros/rollup' // import VueRouter from 'unplugin-vue-router/rollup'  export default {  plugins: [  VueMacros({  plugins: {  vue: Vue(),  // vueJsx: VueJsx(), // if needed  // vueRouter: VueRouter({ // if needed  // extensions: ['.vue', '.setup.tsx']  // })  },  // overrides plugin options  }),  ], }

// esbuild.config.js import { build } from 'esbuild' // import VueRouter from 'unplugin-vue-router/esbuild'  build({  plugins: [  require('vue-macros/esbuild')({  plugins: {  vue: require('unplugin-vue/esbuild')(),  // vueJsx: VueJsx(), // if needed  // vueRouter: VueRouter({ // if needed  // extensions: ['.vue', '.setup.tsx']  // })  },  // overrides plugin options  }),  ], })

// webpack.config.js (Requires Webpack 5+) module.exports = {  /* ... */  plugins: [  require('vue-macros/webpack')({  // overrides plugin options  }),  ], }

// rspack.config.js module.exports = {  /* ... */  plugins: [  require('vue-macros/rspack')({  // overrides plugin options  }),  ], }

// rsbuild.config.js module.exports = {  // ...  tools: {  rspack: {  plugins: [  require('vue-macros/rspack')({  // overrides plugin options  }),  ],  },  }, }

// vue.config.js (Requires Vue CLI 5+) const { defineConfig } = require('@vue/cli-service') const VueMacros = require('vue-macros/webpack')  module.exports = defineConfig({  // ...  // ⚠️ IMPORTANT  parallel: false,  configureWebpack: {  plugins: [  VueMacros({  // overrides plugin options  }),  ],  }, })

Configuration

See the Configurations for more details.

vue-macros.config.ts

import { defineConfig
 } from 'vue-macros' export default defineConfig
({  // options })

TypeScript Support

json

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

Volar Support

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

tsconfig.json

jsonc

{  "vueCompilerOptions": {  "plugins": ["vue-macros/volar"],  }, }

Scoped Plugins

exportExpose, exportProps, and exportRender plugins cannot be used at the same time unless providing a scope.

vue-macros.config.ts

import { defineConfig
 } from 'vue-macros' export default defineConfig
({  exportExpose
: {  include
: ['**/export-expose/**'],  },  exportProps
: {  include
: ['**/export-props/**'],  },  exportRender
: {  include
: ['**/export-render/**'],  }, })