Vue options should be used in proper place

  • VUE_MISPLACED_OPTION
  • Error
  • Medium
  • vue

This rule applies when certain Vue options are used in the wrong place.

el and propsData options can only be used during the creation of a Vue instance with the new keyword.
If they are used in other places, e.g. Vue component definition, their meanings are ignored, and Vue outputs a warning message.

Note: This rule is based on Vue 2.x API specifications.

Noncompliant Code Example

View with compliant examples side by side
import Vue from 'vue';

Vue.component('Hello', {
  propsData: { // VUE_MISPLACED_OPTION alarm because 'propsData' option is used in a Vue component option.
    msg: 'hello'
  },
  template: '<div>{{ msg }}</div>'
});

new Vue({
  el: '#app',
  template: '<Hello msg="hi" />'
});

Compliant Code Example

View with noncompliant examples side by side
import Vue from 'vue';

Vue.component('Hello', {
  props: ['msg'],
  template: '<div>{{ msg }}</div>'
});

new Vue({
  el: '#app',
  template: '<Hello msg="hi" />'
});

Version

This rule was introduced in DeepScan 1.14.0-beta.

See

  • el option

  • propsData option

  • [Vue warn]: option propsData can only be used during instance creation with the new keyword.

  • [Vue warn]: option el can only be used during instance creation with the new keyword.

Was this documentation helpful?