noVueDeprecatedModelDefinition (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/noVueDeprecatedModelDefinition
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/no-deprecated-model-definition

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueDeprecatedModelDefinition": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow the deprecated model option in Vue components.

In Vue 2, the model option let a component choose which prop and event v-model uses. Vue 3 no longer supports this option: v-model on a component always passes the modelValue prop and listens for the update:modelValue event, so a model option has no effect.

Rename the prop to modelValue and emit update:modelValue instead. To keep a custom prop name, use a named v-model, such as v-model:checked, which uses the checked prop and the update:checked event.

See the Vue 3 migration guide for more information.

Examples

Invalid

1
<script>
2
export default {
3
  model: {
4
    prop: "checked",
5
    event: "change",
6
  },
7
  props: ["checked"],
8
};
9
</script>

code-block.vue:3:3 lint/nursery/noVueDeprecatedModelDefinition ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The model option is deprecated.
  
    1 │ <script>
    2 │ export default {
  > 3 │   model: {
      │   ^^^^^^^^
  > 4 │     prop: "checked",
  > 5 │     event: "change",
  > 6 │   },
      │   ^
    7 │   props: ["checked"],
    8 │ };
  
  ℹ Vue 3 ignores this option. v-model on a component always uses the modelValue prop and the update:modelValue event.
  
  ℹ Rename the prop to modelValue and emit update:modelValue, or keep the prop name and use a named v-model such as v-model:checked. See the Vue 3 migration guide for more information.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<script>
2
export default {
3
  props: ["modelValue"],
4
  emits: ["update:modelValue"],
5
};
6
</script>