CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-unplugin-vue-macros

Explore more macros and syntax sugar to Vue.

Pending
Overview
Eval results
Files

configuration.mddocs/

Configuration

Configuration system for unplugin-vue-macros with comprehensive options for all macro features.

Capabilities

Configuration Definition

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/**"],
  },
});

Options Resolution

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;

Core Configuration Interface

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)[];
}

Resolved Configuration

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];

Usage Examples

Vite Configuration

// 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 Configuration

// webpack.config.js
const VueMacros = require("unplugin-vue-macros/webpack");

module.exports = {
  plugins: [
    VueMacros({
      defineOptions: true,
      chainCall: false,
      shortEmits: true,
    }),
  ],
};

Nuxt Configuration

// 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

docs

advanced-features.md

component-definition.md

configuration.md

index.md

props-models.md

syntax-sugar.md

tile.json