Description
Please describe what the rule should do:
In Vue 3, v-model
is always a shortcut for :modelValue="…" @update:modelValue="…"
. In Vue 2, those prop and event names could be customized with the model
definition. A new ESLint rule would help with finding those deprecated model
definitions in the codebase while upgrading to Vue 3. See also https://v3-migration.vuejs.org/breaking-changes/v-model.html
What category should the rule belong to?
[ ] Enforces code style (layout)
[x] Warns about a potential error (problem)
[ ] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)
Provide 2-3 code examples that this rule should warn about:
export default {
model: {
prop: 'list',
}
}
export default defineComponent({
model: {
prop: 'list',
event: 'update'
}
})
export default Vue.extend({
model: {
event: 'update'
}
})
Additional context
An additional allowVue3Compat
boolean option (false
by default) could help with transitioning to Vue 3:
When enabled, the rule would not report model
definitions that match the Vue 3 usage:
export default defineComponent({
model: {
prop: 'foo-bar',
event: 'update:foo-bar'
}
})
After the Vue 3 migration, the option could be disabled again, the model
definition could be deleted, and the v-model:foo="…"
shorthand syntax could then be used without further changes.