Deprecated features of Vue should not be used

• VUE_DEPRECATED_FEATURE
• Error
• Medium
• vue

This rule applies when a deprecated or removed feature of Vue is used.

Currently, this rule checks the following features that are removed or replaced in Vue 3.0:

1. Global API
   • new Vue() (replaced by createApp())
   • Vue.component() (replaced by app.component())
   • Vue.directive() (replaced by app.directive())
   • Vue.mixin() (replaced by app.mixin())
   • Vue.use() (replaced by app.use())
   • Vue.config (replaced by app.config)
   • Vue.observable() (replaced by reactive())
   • Vue.extend()
   • Vue.filter()
   • Vue.set()
   • Vue.delete()
2. Config properties
   • ignoredElements (replaced by isCustomElement())
   • devtools
   • keyCodes
   • productionTip
3. Options
   • el (replaced by app.mount())
   • propsData (replaced by the second argument of createApp())
   • beforeDestroy() (replaced by beforeUnmount())
   • destroyed() (replaced by unmounted())
   • renderError()
   • filters
   • functional
   • model
4. Instance methods
   • $mount() (replaced by app.mount())
   • $destroy()
   • $on()
   • $once()
   • $off()
   • $set()
   • $delete()
5. Instance properties
   • $listeners (merged into $attrs)
   • $scopedSlots (merged into $slots)
   • $children
6. Special attributes
   • slot-scope (replaced by v-slot)
   • inline-template
7. Directive modifiers
   • v-bind.sync (replaced by v-model with an argument)
   • v-bind.prop
   • v-on.native
   • The numeric key codes of v-on
8. Custom directive hooks
   • bind() (replaced by beforeMount())
   • inserted() (replaced by mounted())
   • componentUpdated() (replaced by updated())
   • unbind() (replaced by unmounted())
   • update()
9. Async component options
   • component (replaced by loader)
   • loading (replaced by loadingComponent)
   • error (replaced by errorComponent)
10. Directly using a factory function as an async component (replaced by defineAsyncComponent())
11. Filters
12. Functional templates
13. The createElement parameter of render() (replaced by the globally imported h function)
14. The dot-delimited key paths of $watch()

The following features deprecated in Vue 3.1 are checked also:

1. Config properties
   • isCustomElement() (replaced by compilerOptions.isCustomElement())
2. Options
   • delimiters (replaced by compilerOptions.delimiters)
3. Directive
   • v-is (replaced by is attribute with vue: prefix)

Note: The application of this rule is limited to projects using Vue 3.x version.

Noncompliant Code Example

import Vue from 'vue';
import App from 'App.vue';
import Comp from 'Comp.vue';

Vue.component('Comp', Comp); // VUE_DEPRECATED_FEATURE alarm because 'Vue.component()' is deprecated.

new Vue({ // VUE_DEPRECATED_FEATURE alarm because 'new Vue()' is deprecated.
  el: '#app', // VUE_DEPRECATED_FEATURE alarm because the 'el' option is deprecated.
  render(createElement) { // VUE_DEPRECATED_FEATURE alarm because the 'createElement' parameter is deprecated.
    return createElement(App);
  },
  beforeDestroy() { // VUE_DEPRECATED_FEATURE alarm because 'beforeDestroy()' is deprecated.
    console.log("Destroying");
  }
});

Compliant Code Example

import { createApp, h } from 'vue';
import App from 'App.vue';
import Comp from 'Comp.vue';

const app = createApp({
  render() {
    return h(App);
  },
  beforeUnmount() {
    console.log("Unmounting");
  }
});
app.component('Comp', Comp);
app.mount('#app');

Version

This rule was introduced in DeepScan 1.43.0.

See

• Vue 2.x API

• Vue 3.x API

• Vue 3.0 Migration Guide