Explore more macros and syntax sugar to Vue.
—
Configuration system for unplugin-vue-macros with comprehensive options for all macro features.
Define configuration for Vue Macros with full type safety.
/**
* Define configuration for Vue Macros
* @param options - Configuration options
* @returns Configuration object
*/
function defineConfig(options: Options): Options;Usage Examples:
import { defineConfig } from "unplugin-vue-macros";
export default defineConfig({
// Enable/disable specific macros
defineOptions: true,
defineModels: true,
chainCall: false,
// Configure plugins
plugins: {
vue: vue(),
vueJsx: vueJsx(),
},
// Advanced configuration
reactivityTransform: {
include: ["**/*.vue", "**/*.ts"],
exclude: ["node_modules/**"],
},
});Resolve configuration options with defaults and Vue version detection.
/**
* Resolve configuration options with defaults
* @param options - User configuration options
* @param cwd - Current working directory
* @returns Resolved configuration
*/
function resolveOptions(options?: Options, cwd?: string): OptionsResolved;Main configuration interface with all macro options.
interface Options extends OptionsCommon {
// Props & Models Macros
/** @see https://vue-macros.dev/macros/chain-call.html @default true */
chainCall?: boolean | OptionsChainCall;
/** @see https://vue-macros.dev/macros/define-props.html @default true */
defineProps?: boolean | OptionsDefineProps;
/** @see https://vue-macros.dev/macros/define-props-refs.html @default true */
definePropsRefs?: boolean | OptionsDefinePropsRefs;
/** @see https://vue-macros.dev/macros/define-models.html @default true */
defineModels?: boolean | OptionsDefineModels;
/** @see https://vue-macros.dev/macros/define-prop.html @default true */
defineProp?: boolean | OptionsDefineProp;
// Component Options Macros
/** @see https://vue-macros.dev/macros/define-options.html @default vueVersion < 3.3 */
defineOptions?: boolean | OptionsDefineOptions;
/** @see https://vue-macros.dev/macros/define-slots.html @default vueVersion < 3.3 */
defineSlots?: boolean | OptionsDefineSlots;
/** @see https://vue-macros.dev/macros/define-emit.html @default true */
defineEmit?: boolean | OptionsDefineEmit;
/** @see https://vue-macros.dev/macros/define-render.html @default true */
defineRender?: boolean | OptionsDefineRender;
// Advanced Features
/** @see https://vue-macros.dev/features/better-define.html @default true */
betterDefine?: boolean | OptionsBetterDefine;
/** @see https://vue-macros.dev/features/reactivity-transform.html @default true */
reactivityTransform?: boolean | OptionsReactivityTransform;
/** @see https://vue-macros.dev/macros/setup-component.html @default true */
setupComponent?: boolean | OptionsSetupComponent;
/** @see https://vue-macros.dev/macros/setup-sfc.html @default false */
setupSFC?: boolean | OptionsSetupSFC;
/** @default false */
setupBlock?: boolean | OptionsSetupBlock;
// Syntax Sugar
/** @see https://vue-macros.dev/macros/short-emits.html @default vueVersion < 3.3 */
shortEmits?: boolean | OptionsShortEmits;
/** @see https://vue-macros.dev/macros/short-vmodel.html @default true */
shortVmodel?: boolean | OptionsShortVmodel;
/** @see https://vue-macros.dev/features/short-bind.html @default vueVersion < 3.4 */
shortBind?: boolean | OptionsShortBind;
/** @see https://vue-macros.dev/features/boolean-prop.html @default false */
booleanProp?: boolean | OptionsBooleanProp;
// Export Features
/** @see https://vue-macros.dev/features/export-expose.html @default false */
exportExpose?: boolean | OptionsExportExpose;
/** @see https://vue-macros.dev/features/export-props.html @default false */
exportProps?: boolean | OptionsExportProps;
/** @see https://vue-macros.dev/features/export-render.html @default false */
exportRender?: boolean | OptionsExportRender;
// Optimization
/** @see https://vue-macros.dev/features/hoist-static.html @default true */
hoistStatic?: boolean | OptionsHoistStatic;
// JSX Features
/** @see https://vue-macros.dev/features/jsx-directive.html @default true */
jsxDirective?: boolean | OptionsJsxDirective;
/** @see https://vue-macros.dev/features/jsx-ref.html @default false */
jsxRef?: FilterOptions & { alias?: string[] };
// Language Features
/** @see https://vue-macros.dev/features/script-lang.html @default false */
scriptLang?: boolean | OptionsScriptLang;
// Styling
/** @see https://vue-macros.dev/macros/define-stylex.html @default false */
defineStyleX?: boolean | OptionsDefineStyleX;
// Templates
/** @see https://vue-macros.dev/features/named-template.html @default false @deprecated */
namedTemplate?: boolean | OptionsNamedTemplate;
// Volar Integration
/** @see https://vue-macros.dev/volar/define-generic.html @default true */
defineGeneric?: FilterOptions;
/** @see https://vue-macros.dev/volar/script-sfc.html @default false */
scriptSFC?: FilterOptions;
/** @see https://vue-macros.dev/volar/setup-jsdoc.html @default true */
setupJsdoc?: FilterOptions;
}
interface OptionsCommon extends Omit<BaseOptions, keyof FilterOptions> {
/** Root directory for resolving files */
root?: string;
/** Plugin instances for integration */
plugins?: {
vue?: any;
vueJsx?: any;
vueRouter?: any;
};
/** @internal Nuxt context information */
nuxtContext?: {
isClient?: boolean;
};
}
// Base options from @vue-macros/common
interface BaseOptions {
/** Vue version override */
version?: string;
/** Enable production optimizations */
isProduction?: boolean;
}
// Filter options for file targeting
interface FilterOptions {
/** File inclusion patterns */
include?: string | RegExp | (string | RegExp)[];
/** File exclusion patterns */
exclude?: string | RegExp | (string | RegExp)[];
}Type for fully resolved configuration with all defaults applied.
type OptionsResolved = Required<OptionsCommon> & {
[K in keyof FeatureOptionsMap]: false | FeatureOptionsMap[K];
};
// Feature mapping for all macro options
interface FeatureOptionsMap {
betterDefine: OptionsBetterDefine;
booleanProp: OptionsBooleanProp;
chainCall: OptionsChainCall;
defineEmit: OptionsDefineEmit;
defineGeneric: FilterOptions;
defineModels: OptionsDefineModels;
defineOptions: OptionsDefineOptions;
defineProp: OptionsDefineProp;
defineProps: OptionsDefineProps;
definePropsRefs: OptionsDefinePropsRefs;
defineRender: OptionsDefineRender;
defineSlots: OptionsDefineSlots;
defineStyleX: OptionsDefineStyleX;
exportExpose: OptionsExportExpose;
exportProps: OptionsExportProps;
exportRender: OptionsExportRender;
hoistStatic: OptionsHoistStatic;
jsxDirective: OptionsJsxDirective;
jsxRef: FilterOptions & { alias?: string[] };
namedTemplate: OptionsNamedTemplate;
reactivityTransform: OptionsReactivityTransform;
scriptLang: OptionsScriptLang;
scriptSFC: FilterOptions;
setupBlock: OptionsSetupBlock;
setupComponent: OptionsSetupComponent;
setupJsdoc: FilterOptions;
setupSFC: OptionsSetupSFC;
shortBind: OptionsShortBind;
shortEmits: OptionsShortEmits;
shortVmodel: OptionsShortVmodel;
}
type FeatureName = keyof FeatureOptionsMap;
type FeatureOptions = FeatureOptionsMap[FeatureName];// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import VueMacros from "unplugin-vue-macros/vite";
export default defineConfig({
plugins: [
VueMacros({
plugins: {
vue: vue(),
},
// Customize macro options
defineOptions: true,
defineModels: true,
reactivityTransform: {
include: ["src/**/*.vue"],
},
}),
],
});// webpack.config.js
const VueMacros = require("unplugin-vue-macros/webpack");
module.exports = {
plugins: [
VueMacros({
defineOptions: true,
chainCall: false,
shortEmits: true,
}),
],
};// nuxt.config.ts
export default defineNuxtConfig({
modules: [
["@vue-macros/nuxt", {
defineOptions: true,
defineModels: true,
betterDefine: false,
}],
],
});Install with Tessl CLI
npx tessl i tessl/npm-unplugin-vue-macros