MCP Explorer

Vue Macros

DialtoneApp is using the stored discovery files and saved MCP scan metadata for this domain to look for an MCP endpoint, verify the handshake, and turn the result into a readable chat.

DialtoneApp found a lead, but the endpoint did not complete a usable MCP handshake.

idle

Visit site

Live Chat

MCP conversation

Statusinitialize handshake...

DialtoneApp could not start a live chat with this MCP server.

MCP Explorer

Vue Macros

DialtoneApp is using the stored discovery files and saved MCP scan metadata for this domain to look for an MCP endpoint, verify the handshake, and turn the result into a readable chat.

DialtoneApp found a lead, but the endpoint did not complete a usable MCP handshake.

idle

Visit site

Live Chat

MCP conversation

Statusinitialize handshake...

DialtoneApp could not start a live chat with this MCP server.

:\n\n`v-model`\n\n::: code-group\n\n```vue [App.vue] twoslash\n\u003cscript setup lang=\"tsx\"\u003e\n// ---cut-start---\n// #region v-model\nimport { ref, type FunctionalComponent } from 'vue'\n\nexport const Comp: FunctionalComponent\u003c\n {\n model: string\n models: string[]\n },\n {\n 'update:model': [value: string]\n 'update:models': [value: string[]]\n }\n\u003e = () =\u003e \u003cdiv /\u003e\n// #endregion v-model\n// ---cut-end---\n// @noErrors\nimport { Comp } from './Comp.tsx'\n\nconst name = ref('model')\nconst model = defineModel\u003cstring\u003e()\n\nexport default () =\u003e (\n \u003cComp\n v-model:$name$={model.value}\n v-model:model={model.value}\n // ^|\n /\u003e\n)\n\u003c/script\u003e\n```\n\n\u003c\u003c\u003c ./jsx-directive.md#v-model{tsx} \\[Comp.tsx]\n\n:::\n\n`v-slot`\n\n::: code-group\n\n```vue [App.vue] twoslash\n\u003cscript setup lang=\"tsx\"\u003e\n// ---cut-start---\n// #region v-slot-dynamic\nimport type { FunctionalComponent } from 'vue'\n\nexport const Comp: FunctionalComponent\u003c\n {},\n {},\n {\n default: (scope: { foo: string }) =\u003e any\n title: (scope: { bar: number }) =\u003e any\n }\n\u003e = () =\u003e \u003cdiv /\u003e\n// #endregion v-slot-dynamic\n// ---cut-end---\n// @noErrors\nimport { Comp } from './Comp.tsx'\n\nconst slots = defineSlots\u003c{\n default: (scope: { foo: string }) =\u003e any\n title: (scope: { bar: number }) =\u003e any\n}\u003e()\n\n// ---cut-start---\n// prettier-ignore\n// ---cut-end---\nexport default () =\u003e (\n \u003cComp\u003e\n \u003ctemplate v-for={(Slot, name) in slots} v-slot:$name$={scope}\u003e\n // ^?\n \u003cSlot {...scope} /\u003e\n \u003c/template\u003e\n \u003c/Comp\u003e\n)\n\u003c/script\u003e\n```\n\n\u003c\u003c\u003c ./jsx-directive.md#v-slot-dynamic{tsx} \\[Comp.tsx]\n\n:::\n\n## Modifiers\n\nModifiers are special postfixes denoted by a `_`, which indicate that a directive should be bound in some special way.\n\n```tsx\n\u003cform onSubmit_prevent\u003e\n \u003cinput v-model_number={value} /\u003e\n\u003c/form\u003e\n```\n\n## Volar Configuration\n\n```jsonc {3} [tsconfig.json]\n{\n \"vueCompilerOptions\": {\n \"plugins\": [\"vue-macros/volar\"],\n },\n}\n```\n\n---\n\n---\nurl: /volar/jsx-ref.md\n---\n# jsxRef\u0026#x20;\n\nAutomatically infer type for `useRef`.\n\n| Features | Supported |\n| :------: | :----------------: |\n| Volar | :white\\_check\\_mark: |\n\n## Setup Auto Import\n\n::: code-group\n\n```ts [vite.config.ts]\nimport AutoImport from 'unplugin-auto-import/vite'\n\nexport default defineConfig({\n plugins: [\n AutoImport({\n imports: [\n {\n from: 'vue',\n imports: [['shallowRef', 'useRef']],\n },\n ],\n }),\n ],\n})\n```\n\n```ts [nuxt.config.ts]\nexport default defineNuxtConfig({\n imports: {\n presets: [\n {\n from: 'vue',\n imports: [['shallowRef', 'useRef']],\n },\n ],\n },\n})\n```\n\n:::\n\n## Basic Usage\n\n::: code-group\n\n```vue [App.vue] twoslash\n\u003cscript lang=\"tsx\"\u003e\n// #region comp\nimport { defineComponent } from 'vue'\n\nexport const Comp = defineComponent({\n setup() {\n return { foo: 1 }\n },\n})\n// #endregion comp\n// ---cut---\nimport { useRef } from 'vue-macros/runtime'\n// Or import { shallowRef as useRef } from 'vue'\n// @noErrors\nimport { Comp } from './Comp.ts'\n\nexport default defineComponent(() =\u003e {\n const comp = useRef()\n comp.value?.foo\n // ^?\n\n return () =\u003e (\n \u003c\u003e\n \u003cComp ref={comp} /\u003e\n \u003c/\u003e\n )\n})\n\u003c/script\u003e\n```\n\n\u003c\u003c\u003c ./jsx-ref.md#comp{ts} \\[Comp.ts]\n\n:::\n\n## Volar Configuration\n\n```jsonc [tsconfig.json] {3,6}\n{\n \"vueCompilerOptions\": {\n \"plugins\": [\"vue-macros/volar\"],\n \"vueMacros\": {\n \"jsxRef\": {\n \"alias\": [\"useRef\"],\n },\n },\n },\n}\n```\n\n---\n\n---\nurl: /guide/migration-v3.md\n---\n# Migration from v2 to v3\n\n## Unified Version Management\n\nInitially, we used [`changesets`](https://github.com/changesets/changesets) to\nmanage the versions of all packages in the monorepo. However, after two years of experimentation,\nwe decided to adopt a single-version strategy in v3,\nwhere all sub-packages share the same version number, similar to Vue and Babel.\nThis decision stemmed from our observation that when a sub-package underwent a major change or minor update,\nthe version number of the main package did not adequately reflect these changes.\n\nFor example, when `@vue-macros/define-prop` introduced a breaking change,\nhow should `unplugin-vue-macros` release a new version?\nShould it be a minor or a patch release? When users updated `unplugin-vue-macros`,\nthey couldn’t easily determine whether the update was due to changes in `@vue-macros/define-prop`.\n\nTherefore, after Anthony proposed [Epoch Semantic Versioning](https://antfu.me/posts/epoch-semver),\nwe decided to adopt a more frequent major version update strategy,\nwith all packages sharing the same version number and maintaining a single unified changelog.\n\n## Main Package Rename\n\nWe have renamed the main package from `unplugin-vue-macros` to **`vue-macros`**.\nAfter the official release of v3, `unplugin-vue-macros` will be marked as deprecated.\n\nAs a result, you will need to update your `package.json` and the import statements for Vue Macros:\n\n```diff\n // package.json\n {\n \"devDependencies\": {\n- \"unplugin-vue-macros\": \"^2.14.5\"\n+ \"vue-macros\": \"^3.0.0\"\n }\n }\n```\n\n```diff\n- import { $ref } from 'unplugin-vue-macros/macros'\n+ import { $ref } from 'vue-macros/macros'\n\n- import VueMacros from 'unplugin-vue-macros/vite'\n+ import VueMacros from 'vue-macros/vite'\n```\n\n## Dropping Vue 2 Support\n\nVue 2 reached its end of life (EOL) at the end of 2023, so we have decided to drop support for Vue 2 in v3.\nIf you are still using Vue 2, we recommend continuing with v2 or\nconsidering our [paid support plan](https://github.com/vue-macros/vue-macros/issues/373).\n\n## Node.js Compatibility Changes\n\nIn v3, we have dropped support for Node.js versions below 20.19.\nThis means the minimum Node.js version requirement for v3 is `20.19.0`.\nAdditionally, we have removed CommonJS (CJS) outputs and now only provide ECMAScript modules (ESM).\n\n## Dropping Webpack 4 Support\n\nSince Webpack 4 cannot run in Node.js 18 or later environments,\nwe have also dropped support for Webpack 4 and Vue CLI 4.\nWe recommend upgrading to modern build tools like Vite or Rspack.\n\n---\n\n---\nurl: /features/named-template.md\n---\n# namedTemplate\u0026#x20;\n\n::: warning\n\nNot actively maintained now. Try [createReusableTemplate](https://vueuse.org/core/createReusableTemplate/) instead.\n\n:::\n\nWith enabling `namedTemplate`, `\u003ctemplate\u003e` can be referenced like a variable.\n\nSometimes we need to reverse the order of the very simple components, and don't want to give the features of Vue template up and use JSX/TSX. Then this feature is much helpful.\n\nIf you support this feature, you can go to [the discussion](https://github.com/vuejs/core/discussions/6898) and hit like :+1: or comment.\n\n| Features | Supported |\n| :----------------: | :----------------: |\n| Vue 3 | :white\\_check\\_mark: |\n| Vue 3.3 | :x: |\n| Nuxt 3 | :x: |\n| Vue 2 | :x: |\n| TypeScript / Volar | :x: |\n\n## Basic Usage\n\n```vue {5-7,10-12,16-18}\n\u003cscript setup\u003e\nconst pager = 'top'\n\u003c/script\u003e\n\n\u003ctemplate name=\"pager\"\u003e\n \u003cspan\u003eThis is pager\u003c/span\u003e\n\u003c/template\u003e\n\n\u003ctemplate\u003e\n \u003ctemplate v-if=\"pager === 'top'\"\u003e\n \u003ctemplate is=\"pager\" /\u003e\n \u003c/template\u003e\n\n \u003cspan\u003eHere is data table\u003c/span\u003e\n\n \u003ctemplate v-if=\"pager === 'bottom'\"\u003e\n \u003ctemplate is=\"pager\" /\u003e\n \u003c/template\u003e\n\u003c/template\u003e\n```\n\n## Known Usage\n\n* TypeScript / Volar support is not yet completed.\n\n---\n\n---\nurl: /features/reactivity-transform.md\n---\n# Reactivity Transform\u0026#x20;\n\n| Features | Supported |\n| :----------------: | :----------------: |\n| Vue 3 | :white\\_check\\_mark: |\n| Nuxt 3 | :white\\_check\\_mark: |\n| Vue 2 | :white\\_check\\_mark: |\n| TypeScript / Volar | :white\\_check\\_mark: |\n\n## Installation Standalone Version\n\nif you need Reactivity Transform feature only, the standalone version is more appropriate for you.\n\n### Installation\n\n::: code-group\n\n```bash [npm]\nnpm i -D @vue-macros/reactivity-transform\n```\n\n```bash [yarn]\nyarn add -D @vue-macros/reactivity-transform\n```\n\n```bash [pnpm]\npnpm add -D @vue-macros/reactivity-transform\n```\n\n:::\n\n::: code-group\n\n```ts [Vite]\n// vite.config.ts\nimport ReactivityTransform from '@vue-macros/reactivity-transform/vite'\n\nexport default defineConfig({\n plugins: [ReactivityTransform()],\n})\n```\n\n```ts [Rollup]\n// rollup.config.js\nimport ReactivityTransform from '@vue-macros/reactivity-transform/rollup'\n\nexport default {\n plugins: [ReactivityTransform()],\n}\n```\n\n```js [esbuild]\n// esbuild.config.js\nimport { build } from 'esbuild'\n\nbuild({\n plugins: [require('@vue-macros/reactivity-transform/esbuild')()],\n})\n```\n\n```js [Webpack]\n// webpack.config.js\nmodule.exports = {\n /* ... */\n plugins: [require('@vue-macros/reactivity-transform/webpack')()],\n}\n```\n\n:::\n\n### TypeScript Support\n\n```json [tsconfig.json]\n{\n \"compilerOptions\": {\n // ...\n \"types\": [\"@vue-macros/reactivity-transform/macros-global\" /* ... */]\n }\n}\n```\n\n## Refs vs. Reactive Variables {#refs-vs-reactive-variables}\n\nEver since the introduction of the Composition API, one of the primary unresolved questions is the use of refs vs. reactive objects. It's easy to lose reactivity when destructuring reactive objects, while it can be cumbersome to use `.value` everywhere when using refs. Also, `.value` is easy to miss if not using a type system.\n\nReactivity Transform is a compile-time transform that allows us to write code like this:\n\n```vue twoslash\n\u003cscript setup\u003e\nlet count = $ref(0)\n\nconsole.log(count)\n\nfunction increment() {\n count++\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n \u003cbutton @click=\"increment\"\u003e{{ count }}\u003c/button\u003e\n\u003c/template\u003e\n```\n\nThe `$ref()` method here is a **compile-time macro**: it is not an actual method that will be called at runtime. Instead, the Vue compiler uses it as a hint to treat the resulting `count` variable as a **reactive variable.**\n\nReactive variables can be accessed and re-assigned just like normal variables, but these operations are compiled into refs with `.value`. For example, the `\u003cscript\u003e` part of the above component is compiled into:\n\n```js{5,8} twoslash\nimport { ref } from 'vue'\n\nlet count = ref(0)\n\nconsole.log(count.value)\n\nfunction increment() {\n count.value++\n}\n```\n\nEvery reactivity API that returns refs will have a ` vue-macros.dev MCP | Top Sites | DialtoneApp

MCP Explorer

Vue Macros

DialtoneApp is using the stored discovery files and saved MCP scan metadata for this domain to look for an MCP endpoint, verify the handshake, and turn the result into a readable chat.

DialtoneApp found a lead, but the endpoint did not complete a usable MCP handshake.

idle

Visit site

Live Chat

MCP conversation

Statusinitialize handshake...

DialtoneApp could not start a live chat with this MCP server.

-prefixed macro equivalent. These APIs include:\n\n* [`ref`](https://vuejs.org/api/reactivity-core#ref) -\u003e `$ref`\n* [`computed`](https://vuejs.org/api/reactivity-core#computed) -\u003e `$computed`\n* [`shallowRef`](https://vuejs.org/api/reactivity-advanced#shallowref) -\u003e `$shallowRef`\n* [`customRef`](https://vuejs.org/api/reactivity-advanced#customref) -\u003e `$customRef`\n* [`toRef`](https://vuejs.org/api/reactivity-utilities#toref) -\u003e `$toRef`\n\nThese macros are globally available and do not need to be imported when Reactivity Transform is enabled, but you can optionally import them from `vue-macros/macros` or `@vue-macros/reactivity-transform/macros-global` if you want to be more explicit:\n\n```js twoslash\nimport { $ref } from 'vue-macros/macros'\n// for standalone version:\n// import { $ref } from '@vue-macros/reactivity-transform/macros-global'\n\nconst count = $ref(0)\n```\n\n## Destructuring with `$()` {#destructuring-with}\n\nIt is common for a composition function to return an object of refs, and use destructuring to retrieve these refs. For this purpose, reactivity transform provides the **`$()`** macro:\n\n```js twoslash\nimport { ref } from 'vue'\nfunction useMouse() {\n return {\n x: ref(0),\n y: ref(0),\n }\n}\n// ---cut---\nconst { x, y } = $(useMouse())\n\nconsole.log(x, y)\n```\n\nCompiled output:\n\n```js twoslash\nimport { ref, toRef } from 'vue'\nfunction useMouse() {\n return {\n x: ref(0),\n y: ref(0),\n }\n}\n// ---cut---\nconst __temp = useMouse()\nconst x = toRef(__temp, 'x')\nconst y = toRef(__temp, 'y')\n\nconsole.log(x.value, y.value)\n```\n\nNote that if `x` is already a ref, `toRef(__temp, 'x')` will simply return it as-is and no additional ref will be created. If a destructured value is not a ref (e.g. a function), it will still work - the value will be wrapped in a ref so the rest of the code works as expected.\n\n`$()` destructure works on both reactive objects **and** plain objects containing refs.\n\n## Convert Existing Refs to Reactive Variables with `$()` {#convert-existing-refs-to-reactive-variables-with}\n\nIn some cases we may have wrapped functions that also return refs. However, the Vue compiler won't be able to know ahead of time that a function is going to return a ref. In such cases, the `$()` macro can also be used to convert any existing refs into reactive variables:\n\n```js twoslash\nimport { ref } from 'vue'\n\nfunction myCreateRef() {\n return ref(0)\n}\n\nconst count = $(myCreateRef())\n```\n\n## Reactive Props Destructure {#reactive-props-destructure}\n\nThere are two pain points with the current `defineProps()` usage in `\u003cscript setup\u003e`:\n\n1. Similar to `.value`, you need to always access props as `props.x` in order to retain reactivity. This means you cannot destructure `defineProps` because the resulting destructured variables are not reactive and will not update.\n\n2. When using the [type-only props declaration](https://vuejs.org/api/sfc-script-setup.html#typescript-only-features), there is no easy way to declare default values for the props. We introduced the `withDefaults()` API for this exact purpose, but it's still clunky to use.\n\nWe can address these issues by applying a compile-time transform when `defineProps` is used with destructuring, similar to what we saw earlier with `$()`:\n\n```vue twoslash\n\u003cscript setup lang=\"ts\"\u003e\nimport { watchEffect } from 'vue'\n\ninterface Props {\n msg: string\n count?: number\n foo?: string\n}\n\nconst {\n msg,\n // default value just works\n count = 1,\n // local aliasing also just works\n // here we are aliasing `props.foo` to `bar`\n foo: bar,\n} = defineProps\u003cProps\u003e()\n\nwatchEffect(() =\u003e {\n // will log whenever the props change\n console.log(msg, count, bar)\n})\n\u003c/script\u003e\n```\n\nThe above will be compiled into the following runtime declaration equivalent:\n\n```ts twoslash\nimport { defineComponent, watchEffect } from 'vue'\n\nexport default defineComponent({\n props: {\n msg: { type: String, required: true },\n count: { type: Number, default: 1 },\n foo: String,\n },\n setup(props) {\n watchEffect(() =\u003e {\n console.log(props.msg, props.count, props.foo)\n })\n },\n})\n```\n\n## Retaining Reactivity Across Function Boundaries {#retaining-reactivity-across-function-boundaries}\n\nWhile reactive variables relieve us from having to use `.value` everywhere, it creates an issue of \"reactivity loss\" when we pass reactive variables across function boundaries. This can happen in two cases:\n\n### Passing into function as argument {#passing-into-function-as-argument}\n\nGiven a function that expects a ref as an argument, e.g.:\n\n```ts twoslash\nimport { watch, type Ref } from 'vue'\n\nfunction trackChange(x: Ref\u003cnumber\u003e) {\n watch(x, (x) =\u003e {\n console.log('x changed!')\n })\n}\n\nconst count = $ref(0)\n// @errors: 2345\ntrackChange(count) // doesn't work!\n```\n\nThe above case will not work as expected because it compiles to:\n\n```ts\nconst count = ref(0)\ntrackChange(count.value)\n```\n\nHere `count.value` is passed as a number, whereas `trackChange` expects an actual ref. This can be fixed by wrapping `count` with `$()` before passing it:\n\n```diff\nlet count = $ref(0)\n- trackChange(count)\n+ trackChange($(count))\n```\n\nThe above compiles to:\n\n```js\nimport { ref } from 'vue'\n\nconst count = ref(0)\ntrackChange(count)\n```\n\nAs we can see, `$()` is a macro that serves as an **escape hint**: reactive variables inside `$()` will not get `.value` appended.\n\n### Returning inside function scope {#returning-inside-function-scope}\n\nReactivity can also be lost if reactive variables are used directly in a returned expression:\n\n```ts twoslash\nfunction useMouse() {\n const x = $ref(0)\n const y = $ref(0)\n\n // listen to mousemove...\n\n // doesn't work!\n return {\n x,\n y,\n }\n}\n```\n\nThe above return statement compiles to:\n\n```ts\nreturn {\n x: x.value,\n y: y.value,\n}\n```\n\nIn order to retain reactivity, we should be returning the actual refs, not the current value at return time.\n\nAgain, we can use `$()` to fix this. In this case, `$()` can be used directly on the returned object - any reference to reactive variables inside the `$()` call will retain the reference to their underlying refs:\n\n```ts twoslash\nfunction useMouse() {\n const x = $ref(0)\n const y = $ref(0)\n\n // listen to mousemove...\n\n // fixed\n return $({\n x,\n y,\n })\n}\n```\n\n### Using `$()` on destructured props {#using-on-destructured-props}\n\n`$()` works on destructured props since they are reactive variables as well. The compiler will convert it with `toRef` for efficiency:\n\n```vue twoslash\n\u003cscript setup lang=\"ts\"\u003e\nimport type { Ref } from 'vue'\nfunction passAsRef(count: Ref\u003cnumber\u003e) {\n return count\n}\n// ---cut---\nconst { count } = defineProps\u003c{ count: number }\u003e()\n\npassAsRef($(count))\n\u003c/script\u003e\n```\n\ncompiles to:\n\n```ts twoslash\nimport { defineComponent, toRef, type Ref } from 'vue'\nfunction passAsRef(count: Ref\u003cnumber\u003e) {\n return count\n}\n// ---cut---\nexport default defineComponent({\n props: {\n count: { type: Number, required: true },\n },\n setup(props) {\n const __props_count = toRef(props, 'count')\n passAsRef(__props_count)\n },\n})\n```\n\n## TypeScript Integration {#typescript-integration}\n\nVue provides typings for these macros (available globally) and all types will work as expected. There are no incompatibilities with standard TypeScript semantics, so the syntax will work with all existing tooling.\n\nThis also means the macros can work in any files where valid JS / TS are allowed - not just inside Vue SFCs.\n\nSince the macros are available globally, their types need to be explicitly referenced (e.g. in a `env.d.ts` file):\n\n```ts [env.d.ts]\n/// \u003creference types=\"vue-macros/macros-global\" /\u003e\n\n// or for standalone version:\n/// \u003creference types=\"@vue-macros/reactivity-transform/macros-global\" /\u003e\n```\n\nWhen explicitly importing the macros from `vue-macros/macros` or `@vue-macros/reactivity-transform/macros-global`, the type will work without declaring the globals.\n\n---\n\n---\nurl: /features/script-lang.md\n---\n# scriptLang\u0026#x20;\n\nSet the default language for `\u003cscript\u003e` block.\n\n::: tip\nConvert `\u003cscript setup\u003e` to `\u003cscript setup lang=\"ts\"\u003e`.\n:::\n\n| Features | Supported |\n| :----------: | :----------------: |\n| Vue 3 | :white\\_check\\_mark: |\n| Nuxt 3 | :white\\_check\\_mark: |\n| Vue 2 | :white\\_check\\_mark: |\n| Volar Plugin | :white\\_check\\_mark: |\n\n## Options\n\n```ts\ninterface Options {\n /**\n * @default 'ts'\n */\n defaultLang?: 'ts' | 'tsx' | 'jsx' | string\n}\n```\n\n## Usage\n\n```vue twoslash\n\u003cscript setup\u003e\ndefineProps\u003c{\n foo: string\n}\u003e()\n\u003c/script\u003e\n```\n\n## Volar Configuration\n\n```jsonc {3,5-7} [tsconfig.json]\n{\n \"vueCompilerOptions\": {\n \"plugins\": [\"vue-macros/volar\"],\n \"vueMacros\": {\n \"scriptLang\": {\n \"defaultLang\": \"ts\",\n },\n },\n },\n}\n```\n\n---\n\n---\nurl: /volar/script-sfc.md\n---\n# scriptSFC\u0026#x20;\n\nEnabled Volar support for `.ts` | `.tsx` files.\n\n| Features | Supported |\n| :----------: | :----------------: |\n| Volar Plugin | :white\\_check\\_mark: |\n\n## Basic Usage\n\n### With `jsxDirective`\n\n::: code-group\n\n```tsx [App.tsx]\nexport default ({ foo }: { foo: number }) =\u003e (\n \u003cdiv v-if={foo === 1}\u003e{foo}\u003c/div\u003e\n // ^ will be inferred as 1\n)\n```\n\n:::\n\n## Volar Configuration\n\n```jsonc {3,5} [tsconfig.json]\n{\n \"vueCompilerOptions\": {\n \"plugins\": [\"@vue-macros/volar\"],\n \"vueMacros\": {\n \"scriptSFC\": true,\n },\n },\n}\n```\n\n---\n\n---\nurl: /macros/setup-component.md\n---\n# setupComponent\u0026#x20;\n\n::: tip\n\n`defineRender` cannot be disabled when using `setupComponent`.\n\nFiles in `node_modules` will be ignored by default.\n\n:::\n\nWith `defineSetupComponent`, `\u003cscript setup\u003e` code can be put in **pure JS/TS(X)** without [Vue Language Tools (Volar)](https://github.com/johnsoncodehk/volar) extension.\n\n| Features | Supported |\n| :--------: | :----------------: |\n| Vue 3 | :white\\_check\\_mark: |\n| Nuxt 3 | :x: |\n| Vue 2 | :x: |\n| TypeScript | :x: |\n\nSee also [Vue Vine](https://vue-vine.dev/) - another style for Vue functional component.\n\n## Basic Usage\n\n```tsx twoslash\nexport const App = defineSetupComponent(() =\u003e {\n defineProps\u003c{\n foo: string\n }\u003e()\n\n defineEmits\u003c{\n (evt: 'change'): void\n }\u003e()\n\n defineOptions({\n name: 'App',\n })\n\n // ...\n return \u003cdiv /\u003e\n})\n```\n\n## Type Annotation\n\n```ts twoslash\nexport const App: SetupFC = () =\u003e {\n defineProps\u003c{\n foo: string\n }\u003e()\n\n defineEmits\u003c{\n (evt: 'change'): void\n }\u003e()\n\n defineOptions({\n name: 'App',\n })\n}\n```\n\n## Known Issues\n\n* TypeScript support is not yet completed.\n* The source map does not correspond properly.\n\n---\n\n---\nurl: /volar/setup-jsdoc.md\n---\n# setupJsdoc\u0026#x20;\n\nDefine the component's JSDoc in the script setup block.\n\n| Features | Supported |\n| :----------: | :----------------: |\n| Volar Plugin | :white\\_check\\_mark: |\n\n## Basic Usage\n\n````vue twoslash\n\u003cscript setup lang=\"tsx\"\u003e\n/**\n * @example\n * ```vue\n * \u003cComp :foo=\"1\" /\u003e\n * ```\n */\nconst Comp = () =\u003e \u003cdiv /\u003e\n// ---cut---\n// @noErrors\nimport Comp from './Comp.vue'\n// ^?\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n \u003cComp /\u003e\n\u003c/template\u003e\n````\n\n### There are two places to define\n\n1. The first line of the script setup block.\n\n````vue\n\u003cscript setup lang=\"ts\"\u003e\n/**\n * @example\n * ```vue\n * \u003cComp :foo=\"1\" /\u003e\n * ```\n */\n\ndefineProps\u003c{\n foo: number\n}\u003e()\n\u003c/script\u003e\n````\n\n2. Above the `export default` expression.\n\n::: tip\n\nThis feature depends on `exportRender`, and make sure `exportRender` is not disabled.\n\n:::\n\n````vue\n\u003cscript setup lang=\"tsx\"\u003e\ndefineProps\u003c{\n foo: number\n}\u003e()\n\n/**\n * @example\n * ```vue\n * \u003cComp :foo=\"1\" /\u003e\n * ```\n */\nexport default \u003cdiv /\u003e\n\u003c/script\u003e\n````\n\n## Volar Configuration\n\n```jsonc {3} [tsconfig.json]\n{\n \"vueCompilerOptions\": {\n \"plugins\": [\"vue-macros/volar\"],\n },\n}\n```\n\n---\n\n---\nurl: /macros/setup-sfc.md\n---\n# setupSFC\u0026#x20;\n\n::: tip\n\nIf you're using `setupSFC`, then `defineRender` cannot be disabled.\n\n:::\n\n| Features | Supported |\n| :----------------: | :----------------: |\n| Vue 3 | :white\\_check\\_mark: |\n| Nuxt 3 | :white\\_check\\_mark: |\n| Vue 2 | :white\\_check\\_mark: |\n| TypeScript / Volar | :white\\_check\\_mark: |\n\n## Setup\n\n::: code-group\n\n```ts {7-14} [Vite]\n// vite.config.ts\nimport Vue from '@vitejs/plugin-vue'\nimport VueMacros from 'vue-macros/vite'\n\nexport default defineConfig({\n plugins: [\n VueMacros({\n plugins: {\n vue: Vue({\n include: [/\\.vue$/, /\\.setup\\.[cm]?[jt]sx?$/],\n // ⬆️ setupSFC pattern need to be added\n }),\n },\n }),\n ],\n})\n```\n\n```ts {6-13} [Rollup]\nimport Vue from 'unplugin-vue/rollup'\nimport VueMacros from 'vue-macros/rollup'\n\nexport default defineConfig({\n plugins: [\n VueMacros({\n plugins: {\n vue: Vue({\n include: [/\\.vue$/, /\\.setup\\.[cm]?[jt]sx?$/],\n // ⬆️ setupSFC pattern need to be added\n }),\n },\n }),\n ],\n})\n```\n\n```[🚧 esbuild]\n🚧\n```\n\n```[🚧 Webpack]\n🚧\n```\n\n:::\n\n## Basic Usage\n\n```tsx twoslash\n// Foo.setup.tsx\ndefineProps\u003c{\n foo: string\n}\u003e()\n\ndefineEmits\u003c{\n (evt: 'change'): void\n}\u003e()\n\nexport default () =\u003e (\n \u003cdiv\u003e\n \u003ch1\u003eHello World\u003c/h1\u003e\n \u003c/div\u003e\n)\n```\n\n## Volar Configuration\n\n```jsonc {3,5} [tsconfig.json]\n{\n \"vueCompilerOptions\": {\n \"plugins\": [\"vue-macros/volar\"],\n \"vueMacros\": {\n \"setupSFC\": true,\n },\n },\n}\n```\n\n---\n\n---\nurl: /features/short-bind.md\n---\n# shortBind\u0026#x20;\n\n`:value` -\u003e `:value=\"value\"`\n\nSame-name shorthand for binding prop. If the attribute has the same name with the JavaScript value being bound, the syntax can be further shortened to omit the attribute value.\n\nFor Vue \u003e= 3.4, this feature will be turned off by default.\n\n| Features | Supported |\n| :----------: | :----------------: |\n| Vue 3 | :white\\_check\\_mark: |\n| Nuxt 3 | :white\\_check\\_mark: |\n| Vue 2 | :x: |\n| Volar Plugin | :white\\_check\\_mark: |\n\n## Usage\n\n### Basic Usage\n\n```vue twoslash\n\u003cscript setup\u003e\nconst value = 'foo'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n \u003cinput :value /\u003e\n \u003c!-- =\u003e \u003cinput :foo=\"value\" /\u003e --\u003e\n\u003c/template\u003e\n```\n\n### With `shortVmodel`\n\n```vue\n\u003ctemplate\u003e\n \u003cComp ::value /\u003e\n \u003c!-- =\u003e \u003cComp ::foo=\"foo\" /\u003e =\u003e \u003cComp v-model:foo=\"foo\" /\u003e --\u003e\n \u003cComp $foo /\u003e\n \u003c!-- =\u003e \u003cComp $foo=\"foo\" /\u003e =\u003e \u003cComp v-model:foo=\"foo\" /\u003e --\u003e\n \u003cComp *foo /\u003e\n \u003c!-- =\u003e \u003cComp *foo=\"foo\" /\u003e =\u003e \u003cComp v-model:foo=\"foo\" /\u003e --\u003e\n\u003c/template\u003e\n```\n\n## Volar Configuration\n\n```jsonc {3} [tsconfig.json]\n{\n \"vueCompilerOptions\": {\n \"plugins\": [\"vue-macros/volar\"],\n },\n}\n```\n\n---\n\n---\nurl: /macros/short-emits.md\n---\n# shortEmits\u0026#x20;\n\nSimplify the definition of emits.\n\nFor Vue \u003e= 3.3, this feature will be turned off by default.\n\n| Features | Supported |\n| :--------: | :----------------: |\n| Vue 3 | :white\\_check\\_mark: |\n| Vue 2 | :white\\_check\\_mark: |\n| TypeScript | :white\\_check\\_mark: |\n\n## Basic Usage\n\n```vue twoslash\n\u003cscript setup lang=\"ts\"\u003e\nimport { defineEmits } from 'vue-macros/macros'\n\nconst emits = defineEmits\u003c{\n // tuple\n 'update:modelValue': [val: string]\n // function\n update: (val: string) =\u003e void\n}\u003e()\n\u003c/script\u003e\n```\n\nUsing type `ShortEmits` or for short `SE`.\n\n```vue twoslash\n\u003cscript setup lang=\"ts\"\u003e\nconst emits = defineEmits\u003c\n SE\u003c{\n // tuple\n 'update:modelValue': [val: string]\n // function\n update: (val: string) =\u003e void\n }\u003e\n\u003e()\n\u003c/script\u003e\n```\n\n## Difference with Official Version\n\n* function style of declaration is not supported by official version.\n\n---\n\n---\nurl: /macros/short-vmodel.md\n---\n# shortVmodel\u0026#x20;\n\nA shorthand for `v-model`.\n\n`v-model` -\u003e `::` / ` vue-macros.dev MCP | Top Sites | DialtoneApp

MCP Explorer

Vue Macros

DialtoneApp is using the stored discovery files and saved MCP scan metadata for this domain to look for an MCP endpoint, verify the handshake, and turn the result into a readable chat.

DialtoneApp found a lead, but the endpoint did not complete a usable MCP handshake.

idle

Visit site

Live Chat

MCP conversation

Statusinitialize handshake...

DialtoneApp could not start a live chat with this MCP server.

/ `*`\n\nIf you have any questions about this feature, you can comment on [RFC Discussion](https://github.com/vuejs/rfcs/discussions/395).\n\n| Features | Supported |\n| :----------: | :----------------: |\n| Vue 3 | :white\\_check\\_mark: |\n| Nuxt 3 | :white\\_check\\_mark: |\n| Vue 2 | :x: |\n| Volar Plugin | :white\\_check\\_mark: |\n\n## Options\n\n```ts\ninterface Options {\n /**\n * @default ' \n */\n prefix?: '::' | ' | '*'\n}\n```\n\n## Usage\n\n### ` vue-macros.dev MCP | Top Sites | DialtoneApp

MCP Explorer

Vue Macros

DialtoneApp is using the stored discovery files and saved MCP scan metadata for this domain to look for an MCP endpoint, verify the handshake, and turn the result into a readable chat.

DialtoneApp found a lead, but the endpoint did not complete a usable MCP handshake.

idle

Visit site

Live Chat

MCP conversation

Statusinitialize handshake...

DialtoneApp could not start a live chat with this MCP server.

Dollar Sign (Default)\n\n```vue\n\u003ctemplate\u003e\n \u003cinput $=\"msg\" /\u003e\n \u003c!-- =\u003e \u003cinput v-model=\"msg\" /\u003e --\u003e\n \u003cdemo $msg=\"msg\" /\u003e\n \u003c!-- =\u003e \u003cinput v-model:msg=\"msg\" /\u003e --\u003e\n\u003c/template\u003e\n```\n\n### `::` Double Binding\n\n```vue\n\u003ctemplate\u003e\n \u003c!-- prettier-ignore --\u003e\n \u003cinput ::=\"msg\" /\u003e\n \u003c!-- =\u003e \u003cinput v-model=\"msg\" /\u003e --\u003e\n \u003cdemo ::msg=\"msg\" /\u003e\n \u003c!-- =\u003e \u003cinput v-model:msg=\"msg\" /\u003e --\u003e\n\u003c/template\u003e\n```\n\n### `*` Asterisk Sign\n\n```vue\n\u003ctemplate\u003e\n \u003cinput *=\"msg\" /\u003e\n \u003c!-- =\u003e \u003cinput v-model=\"msg\" /\u003e --\u003e\n \u003cdemo *msg=\"msg\" /\u003e\n \u003c!-- =\u003e \u003cinput v-model:msg=\"msg\" /\u003e --\u003e\n\u003c/template\u003e\n```\n\n## Volar Configuration\n\n```jsonc {3,5-7} [tsconfig.json]\n{\n \"vueCompilerOptions\": {\n \"plugins\": [\"vue-macros/volar\"],\n \"vueMacros\": {\n \"shortVmodel\": {\n \"prefix\": \"$\",\n },\n },\n },\n}\n```\n\n## Known Issues\n\n* Prettier will format `::=` to `:=` (e.g. `\u003cdiv ::=\"msg\" /\u003e` -\u003e `\u003cdiv :=\"msg\" /\u003e`). The comment `\u003c!-- prettier-ignore --\u003e` is required if prefix is `::`.\n\n---\n\n---\nurl: /volar/template-ref.md\n---\n# templateRef\u0026#x20;\n\nAutomatically infer type for `templateRef` (from [VueUse](https://vueuse.org/core/templateRef/))\nand `useTemplateRef` (Vue 3.5+).\n\n::: warning\n\nThis feature is officially supported since Volar (`vue-tsc`) v2.1.0.\nVue Macros is no longer offering this feature as a plugin.\n\n:::\n\n| Features | Supported |\n| :------: | :----------------: |\n| Volar | :white\\_check\\_mark: |\n\n## Basic Usage\n\n::: code-group\n\n```vue [App.vue] twoslash\n\u003cscript setup lang=\"ts\"\u003e\n// #region comp\nimport { defineComponent } from 'vue'\n\nexport const Comp = defineComponent({\n setup() {\n return { foo: 1 }\n },\n})\n// #endregion comp\n// ---cut---\nimport { templateRef } from '@vueuse/core'\n// @noErrors\nimport { Comp } from './Comp.ts'\n\nconst comp = templateRef('comp')\ncomp.value?.foo\n// ^?\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n \u003cComp ref=\"comp\" /\u003e\n\u003c/template\u003e\n```\n\n\u003c\u003c\u003c ./template-ref.md#comp{ts} \\[Comp.ts]\n\n:::\n\n## Volar Configuration\n\nNo configuration required.\n\n---\n\n---\nurl: /macros.md\n---\n# Usage\n\nList of all available macros.\n\nPlease make sure `vue-macros` is set up correctly. If you haven't yet, read [Getting Started](../guide/getting-started.md) first.\n\n## Implemented by Vue 3.3\n\n* [defineOptions](./define-options.md)\n* [defineSlots](./define-slots.md)\n* [shortEmits](./short-emits.md)\n\n## Stable Features\n\n* [defineModels](./define-models.md)\n* [defineProps](./define-props.md)\n* [definePropsRefs](./define-props-refs.md)\n* [defineRender](./define-render.md)\n* [shortVmodel](./short-vmodel.md)\n\n## Experimental Features\n\n* [defineProp](./define-prop.md)\n* [defineEmit](./define-emit.md)\n* [setupComponent](./setup-component.md)\n* [setupSFC](./setup-sfc.md)\n* [chainCall](./chain-call.md)\n* [defineStyleX](./define-stylex.md)\n","robots_txt_url":null,"llms_txt_url":"/api/v1/crawler/top-sites/vue-macros.dev/llms.txt","llms_full_txt_url":"/api/v1/crawler/top-sites/vue-macros.dev/llms-full.txt"}}

Top Sites>Vue Macros>MCP

Vue Macros

MCP conversation

Top Sites>Vue Macros>MCP

Vue Macros

MCP conversation

Top Sites>Vue Macros>MCP

Vue Macros

MCP conversation

Top Sites>Vue Macros>MCP

Vue Macros

MCP conversation

Top Sites>Vue Macros>MCP

Vue Macros

MCP conversation

Top Sites Vue MacrosMCP

Top Sites Vue MacrosMCP

Top Sites Vue MacrosMCP

Top Sites Vue MacrosMCP

Top Sites Vue MacrosMCP