Vue Nuxt
Tips & Tricks

A collection of Vue, Nuxt and Vite tips, tricks and good practices.

next

Starting in Vue 3.4, the recommended approach to achieve two-way data binding is using the `defineModel()` macro.

<!-- before defineModel -->
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <input
    :value="props.modelValue"
    @input="emit('update:modelValue', $event.target.value)"
  />
</template>


<!-- after defineModel -->
<script setup>
const model = defineModel();
</script>

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