0Pricing
Vue Academy · Lesson

Vue Macros and Community Proposals

vue-macros library, experimental defineModel, defineOptions, setupSFC proposals.

Vue Macros and Community Proposals is a free Vue Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Compiler Macros in script setup

In <script setup>, Vue provides compiler macros — functions like defineProps and defineEmits that are processed at compile time, not imported at runtime. Vue 3.4 and later added more, and the community vue-macros project experiments with even more.

vue-macros: An Experimentation Ground

vue-macros is a community library that ships experimental macros ahead of (or beyond) core Vue. Successful ideas sometimes graduate into core — defineModel started here before becoming stable.

// vite.config
import VueMacros from 'unplugin-vue-macros/vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [VueMacros({ plugins: { vue: vue() } })]
})

defineModel: The Old Way

Before defineModel, implementing v-model on a component meant declaring a modelValue prop and emitting update:modelValue manually — verbose and error-prone.

<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

function onInput(e) {
  emit('update:modelValue', e.target.value)
}
</script>

defineModel: Stable in Vue 3.4

defineModel became stable in Vue 3.4. It returns a writable ref that is automatically wired to the prop and update event. Reading it gives the value; assigning to it emits the update.

<script setup>
const model = defineModel()
// model.value reads modelValue
// model.value = x emits update:modelValue
</script>

<template>
  <input v-model="model" />
</template>

Named and Typed defineModel

defineModel supports named models (v-model:title) and options like required and a type, mirroring defineProps.

<script setup>
const title = defineModel('title', { type: String, required: true })
const count = defineModel('count', { default: 0 })
</script>

Multiple v-models Made Easy

With named models a component can expose several two-way bindings cleanly — something that previously required many prop/emit pairs.

<!-- parent -->
<UserForm v-model:name="name" v-model:email="email" />

<!-- UserForm script setup -->
<!-- const name = defineModel('name') -->
<!-- const email = defineModel('email') -->

defineOptions

defineOptions (stable in Vue 3.3) lets you set component options like name and inheritAttrs directly inside <script setup>, removing the need for a second <script> block.

<script setup>
defineOptions({
  name: 'UserCard',
  inheritAttrs: false
})
</script>

Why name and inheritAttrs Matter

A component name aids devtools, recursion, and <KeepAlive> include/exclude. inheritAttrs: false stops automatic attribute fallthrough so you can place attrs on a specific inner element via v-bind="$attrs".

<script setup>
defineOptions({ inheritAttrs: false })
</script>

<template>
  <div class="wrapper">
    <input v-bind="$attrs" />
  </div>
</template>

Other Notable Macros

Vue also offers defineExpose (control what a parent ref can access), defineSlots (type slots), and withDefaults (defaults for type-based props). Knowing these rounds out the <script setup> toolkit.

<script setup lang="ts">
const props = withDefaults(
  defineProps<{ size?: 'sm' | 'lg' }>(),
  { size: 'sm' }
)
defineExpose({ focus })
</script>

Experimental vs Stable: Choose Wisely

Core, stable macros (defineModel, defineOptions) are safe for production. vue-macros experiments are useful for prototyping and early adoption, but APIs may change — gate them carefully in shipping apps.

Following Community Proposals

New ideas surface as RFCs and in vue-macros. Watching these helps you anticipate where the framework is heading — and lets you give feedback before features stabilize.

Quick Check

Test your understanding of Vue macros.

Recap

You learned about macros and proposals:

  • vue-macros hosts experimental macros; some graduate to core
  • defineModel (stable in 3.4) simplifies component v-model
  • Named/typed models enable multiple clean two-way bindings
  • defineOptions sets name/inheritAttrs in <script setup>
  • Prefer stable macros in production; treat experiments with care

Frequently asked questions

Is the “Vue Macros and Community Proposals” lesson free?

Yes — the full text of “Vue Macros and Community Proposals” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Vue Macros and Community Proposals”?

vue-macros library, experimental defineModel, defineOptions, setupSFC proposals. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Vue Macros and Community Proposals” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Vue Vapor Mode: Compile-Time Optimization
  2. Vite Ecosystem: Plugins and Tooling
  3. Vue Macros and Community Proposals
  4. Choosing the Right Vue Stack for 2025+
← Back to Vue Academy