Deprecated features of Vue should not be used

  • VUE_DEPRECATED_FEATURE
  • Error
  • Medium
  • vue

This rule applies when a deprecated 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 (replaced by v-slot)
    • 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()

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

Noncompliant Code Example

View with compliant examples side by side
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

View with noncompliant examples side by side
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

Was this documentation helpful?