Vue Macrosとは？Vue SFC Syntax Extensions

ページ内ナビ

概要

Vue Macros 3.1.4はVueへ追加のmacroやsyntax sugarを提供するtoolsetです。define系macro、short syntax、setup拡張などをbuild時に変換し、Vite、Webpack、Rspack、Rollup、esbuild等へunplugin経由で統合できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-10-05

主な特徴

define系macroやSFC syntax extensionをbuild時に変換する

Vue MacrosはdefineProps系、defineModels、defineSlots、setup component、short v-modelなど複数のmacro/pluginをまとめ、SFC sourceをcompile-timeに変換します。

出典：[1][3]

Vite・Webpack・Rspack・Rollup・esbuildなど複数bundlerへ統合する

packageはVite、Webpack、Rspack、Rollup、Rolldown、esbuild向けentry pointをexportし、unplugin-based integrationを提供します。

出典：[1][2]

TypeScript/Volar supportをmacroと組み合わせる

READMEはFull TypeScript / Volar supportを掲げ、macro syntaxをeditor type informationへ接続するtoolingもmonorepoに含みます。

出典：[1]

向いている用途

Vue標準syntaxだけでは冗長なcomponent patternを短く表現したい場合に向く

large SFC codebaseで繰り返されるprops/emits/model/setup patternをcompile-time sugarへ寄せ、component authoringを簡潔にしたいteamに適します。

出典：[1]

導入前の確認

3.1.4はVue 2.7/3とNode 20.19+を対象にする

vue-macros 3.1.4はVue ^2.7.0 || ^3.2.25をpeer dependency、Node >=20.19.0をengineとして定義しています。build環境側のNode versionも確認してください。

出典：[2]

3.1.4はv-slotとVolar JSX directiveのdynamic model処理を修正する

3.1.4ではv-for属性を含むv-slot resultのcastと、Volar/JSX directiveでdynamic model update・modifierのargument位置を修正しています。該当macroを使うTypeScript projectではeditor diagnosticsも確認対象です。

出典：[4]

参考にした公式資料

[1]Vue Macros v3.1.4 README(2026-10-05)
[2]vue-macros 3.1.4 package metadata(2026-10-05)
[3]Vue Macros combined plugin source(2026-10-05)
[4]Vue Macros v3.1.4 release(2026-10-05)
[5]Vue Macros MIT license(2026-10-05)

編集部からの補足

Vue Macros 3.1.4はVue ^2.7.0 または ^3.2.25をpeer dependencyとし、Node >=20.19.0を要求します。macroはcompile-time変換なので、Vue本体へ追加された同等機能との重複もupgrade時に確認してください。

3ステップで試す

1
Vue Macros 3.1.4とVue 3.5.43を固定して導入する
一時npm projectへreview対象のVue MacrosとVueを固定して導入します。
demo=$(mktemp -d "${TMPDIR:-/tmp}/vue-macros.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-dev --save-exact vue-macros@3.1.4 vue@3.5.43
2
package versionを確認する
Vue MacrosとVueが想定versionで解決されていることを確認します。
test "$(node -e "const fs=require('fs');const v=p=>JSON.parse(fs.readFileSync(p)).version;console.log(v('node_modules/vue-macros/package.json')+'/'+v('node_modules/vue/package.json'))")" = '3.1.4/3.5.43'
3
Vite plugin entryを確認する
Vite自体を起動せず、build integration用plugin factoryをimportできることを確認します。
test "$(node --input-type=module -e "import VueMacros from 'vue-macros/vite';console.log(typeof VueMacros)")" = 'function'

公式READMEで確認

成長

成長の推移 · 直近30日

1,984 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 0
Open PR: 16

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

vue
unplugin
rollup
vite
esbuild
sfc
script-setup
options
webpack
macros
vuejs
rsbuild

Stars: 1,984
Forks: 124
Watchers: 8
Open Issues: 22
Contributors: 43
所有者種別: Organization
主要言語: TypeScript
ライセンス: MIT
リポジトリ最終更新: 2026/10/05