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.

<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.

<script setup lang="ts">
const { modelValue } = defineModels({
  modelValue: String,
})
</script>

With Model Options

<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.

<script setup lang="ts">
let { modelValue, count } = $defineModels<{
  modelValue: string
  count: number
}>()

console.log(modelValue)
modelValue = 'newValue'
count++
</script>

Compiled Code

<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
{
  "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,
      },
    },
  },
}