defineModels

Stability: stable

Declaring 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

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

tsconfig.json

jsonc

{  "vueCompilerOptions": {  "target": 3, // or 2.7 for Vue 2  "plugins": ["vue-macros/volar"],  "vueMacros": {  "defineModels": {  // Only works when target is 2.7.  "unified": true,  },  },  }, }