Supports for Vue.js 3.x

[ota-meshi]

In this issue, I will list the Vue.js 3.x changes that need to be supported by eslint-plugin-vue.

---

• Support for Fragments. Plans for the Next Iteration of Vue.js
  • Feature/support for fragments #1038 Change vue/valid-template-root to allow multiple root nodes.
  • Feature/support for fragments #1038 Add vue/no-multiple-template-root rule that disallows multiple root nodes (for Vue 2).
• Removing v-bind's .sync modifier and replacing it with an argument on v-model. RFC0005
  • Vue3 v-model API changes #1039 Change vue/valid-v-model to allows argument (component only).
  • Vue3 v-model API changes #1039 Add vue/no-v-model-argument rule that disallows argument (for Vue 2).
  • Vue3 v-model API changes #1039 Add vue/no-deprecated-v-bind-sync rule that disallows v-bind.sync.
• Functional API Change. RFC0007
  • Add vue/no-deprecated-functional-template rule #1119 Add vue/no-deprecated-functional-template rule that disallows <template functional>.
• Global API changes. RFC0009
  • Updated to detect Vue3 components. #1073 Add the CallExpression of app.component and app.mixin to utils/index.isVueComponent.
• v-model API changes RFC0011
  • Vue3 v-model API changes #1039 Modify vue/valid-v-model rule to provide support for custom modifiers. Supports for Vue.js 3.x #1035 (comment)
  • Vue3 v-model API changes #1039 Add vue/no-custom-modifiers-on-v-model rule to checks if v-model does not contain custom modifiers (Vue 2 backward compatibility) Supports for Vue.js 3.x #1035 (comment)
• Composition API. RFC0013
  • Add the setting of the setup property to vue/order-in-components rule.
  • New: Add vue/no-ref-as-operand rule #1065 Add vue/no-ref-as-operand rule. Supports for Vue.js 3.x #1035 (comment)
  • New: Add vue/no-watch-after-await rule #1068 Add vue/no-watch-after-await rule. Supports for Vue.js 3.x #1035 (comment)
  • New: Add vue/no-lifecycle-after-await rule #1067 Add vue/no-lifecycle-after-await rule. Supports for Vue.js 3.x #1035 (comment)
  • New: Add vue/no-setup-props-destructure rule #1066 Add vue/no-setup-props-destructure rule. Supports for Vue.js 3.x #1035 (comment)
  • no-xxxx-keys: change to handle setup #1082 Change vue/no-dupe-keys rule and vue/no-reserved-keys to handle setup.
• Drop support for using numbers (keyCodes) as v-on modifiers. RFC0014
  • New: Add vue/no-deprecated-v-on-number-modifiers rule #1079 Add vue/no-deprecated-v-on-number-modifiers rule that disallows numbers as v-on modifiers.
  • Add vue/no-deprecated-vue-config-keycodes rule #1118 Add vue/no-deprecated-vue-config-keycodes rule that disallows Vue.config.keyCodes.
• Remove support for filters. RFC0015
  • feat(RFC0015): add no-deprecated-filter rule #1043 Add vue/no-deprecated-filter rule that disallows Vue2 filter.
• Remove inline-template. RFC0016
  • New: Add vue/no-deprecated-inline-template rule #1100 Add vue/no-deprecated-inline-template rule that disallow inline-template attributtes.
• Using <transition> as component's root will no longer trigger transitions when the component is toggled from the outside.. RFC0017
  • New: Add vue/require-v-if-inside-transition rule #1099 Add vue/require-v-if-inside-transition rule that checks whether expose a boolean prop to control the presence of content inside <transition>. e.g v-if, v-show. Supports for Vue.js 3.x #1035 (comment)
• Removing object declaration for data RFC0019
  • New: Add vue/no-deprecated-data-object-declaration rule #1083 Add vue/no-deprecated-data-object-declaration rule
• Remove $on, $off and $once instance methods RFC0020
  • New: Add vue/no-deprecated-events-api rule #1097 Add vue/no-deprecated-events-api rule
• Custom Elements Interop Improvements RFC0027
  • Add vue/no-deprecated-html-element-is rule #1117 Add vue/no-deprecated-html-element-is rule that disallow the is attribute on HTML elements.
• "emits" component option RFC0030
  • Add the setting of the emits property to vue/order-in-components rule.
  • Add vue/require-explicit-emits rule #1124 Add vue/require-explicit-emits rule that requires the emits option to have a name called by $emit().
  • Add vue/return-in-emits-validator rule #1129 Add vue/return-in-emits-validator rule enforces that a return statement is present in emits validator.
• Attribute Fallthrough Updates.RFC0031
  • Add vue/no-deprecated-v-on-native-modifier rule #1130 Add vue/no-deprecated-v-on-native-modifier rule that disallow .native modifier on v-on.
  • Add vue/no-deprecated-dollar-listeners-api rule #1133 Add vue/no-deprecated-dollar-listeners-api rule that disallow $listeners.
• TODO I need to check if any RFCs after RFC0033 are added.

---

List the changes after #1036 was merged.

• Add categories for Vue 3
  • essential for Vue 3
    • Add vue/no-deprecated-filter rule.
    • Add vue/no-deprecated-v-bind-sync rule.
    • New: Add vue/no-deprecated-v-on-number-modifiers rule #1079 Add vue/no-deprecated-v-on-number-modifiers rule.
    • New: Add vue/no-deprecated-data-object-declaration rule #1083 Add vue/no-deprecated-data-object-declaration rule
    • New: Add vue/no-deprecated-events-api rule #1097 Add vue/no-deprecated-events-api rule
    • New: Add vue/no-deprecated-inline-template rule #1100 Add vue/no-deprecated-inline-template rule
    • New: Add vue/require-v-if-inside-transition rule #1099 Add vue/require-v-if-inside-transition rule.
    • Add vue/no-ref-as-operand rule.
    • New: Add vue/no-watch-after-await rule #1068 Add vue/no-watch-after-await rule.
    • Add vue/no-lifecycle-after-await rule.
    • Add vue/no-setup-props-destructure rule.
    • Add the ruleset for Vue.js 3 #1061 Add vue/no-deprecated-scope-attribute rule.
    • Add the ruleset for Vue.js 3 #1061 Add vue/no-deprecated-slot-attribute rule.
    • Add the ruleset for Vue.js 3 #1061 Add vue/no-deprecated-slot-scope-attribute rule.
    • Remove vue/valid-v-bind-sync rule.
    • Add vue/no-deprecated-functional-template rule #1119 Add vue/no-deprecated-functional-template rule.
    • Add vue/no-deprecated-html-element-is rule #1117 Add vue/no-deprecated-html-element-is rule.
    • Add vue/no-deprecated-vue-config-keycodes rule #1118 Add vue/no-deprecated-vue-config-keycodes rule.
    • Add vue/no-deprecated-v-on-native-modifier rule #1130 Add vue/no-deprecated-v-on-native-modifier rule.
    • Add vue/no-deprecated-dollar-listeners-api rule #1133 Add vue/no-deprecated-dollar-listeners rule.
    • Add vue/return-in-emits-validator rule #1129 Add vue/return-in-emits-validator rule.
  • strongly-recommended for Vue 3
  • recommended for Vue 3
• Change categories for Vue 2
  • essential for Vue 2
    • Add vue/no-multiple-template-root rule.
    • Add vue/no-v-model-argument rule.
    • Add vue/no-custom-modifiers-on-v-model rule.
  • strongly-recommended for Vue 2
  • recommended for Vue 2

---

refs

https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf
https://github.com/vuejs/rfcs/pulls?utf8=%E2%9C%93&q=is%3Apr+label%3A3.x+
https://vueschool.io/articles/vuejs-tutorials/exciting-new-features-in-vue-3/
https://vue-composition-api-rfc.netlify.com/

[haoqunjiang]

/cc @vuejs/docs

I think these changes are also to be addressed in the new style guide.
Any thoughts?

[haoqunjiang]

I think a require-v-if-inside-transition rule can be added for RFC0017

[yyx990803]

Some rules I had in mind:

• no-ref-as-operand:

  Detect cases where a ref is used incorrectly as an operand in binary operations. + is probably the most common case for such errors. For example:

  const count = ref(0)
  
  count++ // error
  count + 1 // error
  1 + count // error

  A ref used as the condition in a ternary is probably also an error:

  const ok = ref(true)
  
  const msg = ok ? 'yes' : 'no' // error

• no-watch-after-await & no-lifecycle-after-await:

  In setup(), watch and onXXX lifecycle hooks should be registered synchronously. So their usage should be prohibited in async setup() after await statements:

  async setup() {
    watch(() => { /* ... */ }) // ok
    onMounted(() => { /* ... */ }) // ok
  
    await doSomething()
  
    watch(() => { /* ... */ }) // error
    onMounted(() => { /* ... */ }) // error
  }

• no-setup-props-destructure

  Destructuring the props passed to setup will cause the value to lose reactivity.

  // Do
  setup(props) {
    watch(() => {
      console.log(props.count) // ok
    })
  
    return () => {
      return h('div', props.count) // ok
    }
  }
  
  // Don't
  setup({ count }) { // error
    watch(() => {
      console.log(count) // not going to detect changes
    })
  
    return () => {
      return h('div', count) // not going to update
    }
  }

  Also, destructuring in root scope of setup() should error, but ok inside nested callbacks or returned render functions:

  setup(props) {
    const { count } = props // error
  
    watch(() => {
      const { count } = props // ok
      console.log(count)
    })
  
    return () => {
      const { count } = props // ok
      return h('div', count)
    }
  }

[ota-meshi]

@sodatea @yyx990803 Thank you for your comments!

I have added new rules to the list.

[ota-meshi]

@michalsnik @mysticatea Could you comment on this issue if you have any feedback?

[codebender828]

Hi! Thanks @ota-meshi @sodatea @yyx990803 for the work done with this plugin.

Will we be adding any rules for when consumers try to access refs in the template through .value? I feel like some people would try to do this, yet based on the RFC docs, Vue internally does this for you.

[yyx990803]

@codebender828 that's a good one, although a user may very well have an object with .value so we will need the component's type information to be able to warn without false positives.

[przemkow]

I have a question about v-model changes. 🙂
If i understood RFC 0011 right, v-model api will provide also support for custom modifiers.
Adding that feature wouldn't require also some changes to vue/valid-v-model rule?
Ex.:

• Modify vue/valid-v-model rule to provide support for custom modifiers.
• Add vue/no-custom-modifiers-on-v-model rule to checks if v-model does not contain custom modifiers (Vue 2 backward compatibility)

[yyx990803]

Note that custom modifiers are only supported for v-model on custom components. Usage on native <input>, <select> and <textarea> still only support the built-in modifiers.

[ota-meshi]

@przemkow Thank you for your comment. And thank you for your contribution.
I overlooked the custom modifiers change.
I think we need to change the valid-v-model rule and add new rule as you say.

[przemkow]

Thank you for the clarification @yyx990803 🙂
No problem @ota-meshi 😉 I hope this contribution will be helpful for the whole community.

I updated previously created PR ( #1039 ) so now it handles both RFC0005 and RFC0011.