Back
VueMediumNew

What is `defineModel` and how does it simplify `v-model`?

Newer compiler macro that replaces prop + emit boilerplate

Ideal Answer

defineModel is a compiler macro (stable since Vue 3.4) that simplifies implementing v-model on components. It automatically declares a prop and a corresponding update event, and returns a ref you can read/write directly.

JavaScript
<script setup>
const model = defineModel()
function clear() {
  model.value = ''
}
</script>

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

This replaces the older pattern of manually writing defineProps(['modelValue']) plus defineEmits(['update:modelValue']).