Skip to content

defineModels NPM Version

Stability: stable

Declaring and mutate v-model props as the same as normal variable using the defineModels.

FeaturesSupported
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

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

Contributors

Changelog