Vue MacrosdefineModels
Stability:
stableDeclaring and mutate v-model props as the same as normal variable using the defineModels.
| Features | Supported |
|---|---|
| Vue 3 | ✅ |
| Nuxt 3 | ✅ |
| Vue 2 | ✅ |
| Volar Plugin | ✅ |
Options
ts
VueMacros({
defineModels: {
/**
* Unified mode, only works for Vue 2
*
* Converts `modelValue` to `value`
*/
unified: false,
},
})Basic Usage
Requires @vueuse/core, install it by yourself before using.
vue
<script setup lang="ts">
const { modelValue, count } = defineModels<{
modelValue: string
count: number
}>()
console.log(modelValue.value)
modelValue.value = 'newValue'
</script>❌ Object declaring is not supported.
vue
<script setup lang="ts">
const { modelValue } = defineModels({
modelValue: String,
})
</script>With Model Options
vue
<script setup lang="ts">
const { modelValue } = defineModels<{
modelValue: ModelOptions<
string,
{ defaultValue: 'something'; deep: true; passive: true }
>
}>()
</script>With Reactivity Transform
WARNING
Assignment expression is only supported in <script setup> block. In other words invalid in <template>.
@vueuse/core is not required.
vue
<script setup lang="ts">
let { modelValue, count } = $defineModels<{
modelValue: string
count: number
}>()
console.log(modelValue)
modelValue = 'newValue'
count++
</script>Compiled Code
vue
<script setup lang="ts">
const { modelValue, count } = defineProps<{
modelValue: string
count: number
}>()
const emit = defineEmits<{
(evt: 'update:modelValue', value: string): void
(evt: 'update:count', value: number): void
}>()
console.log(modelValue)
emit('update:modelValue', 'newValue')
emit('update:count', count + 1)
</script>Volar Configuration
jsonc
// tsconfig.json
{
"vueCompilerOptions": {
"target": 3, // or 2.7 for Vue 2
"plugins": [
"@vue-macros/volar/define-models"
// ...more feature
],
"vueMacros": {
"defineModels": {
// Only works when target is 2.7.
"unified": true
}
}
}
}