Vue option should be defined with a valid type

  • VUE_MISMATCHED_TYPE_OF_OPTION
  • Error
  • Medium
  • vue

This rule applies when Vue options are defined with invalid types.

If Vue options are defined with invalid types, their meanings are ignored, and Vue outputs a warning message.
For example, data option can be defined as an object or a function for a Vue instance. But for Vue component, only function type is allowed, which is confusing and can easily lead to a mistake.

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', {
  data: { msg: 'hi' }, // VUE_MISMATCHED_TYPE_OF_OPTION alarm because 'data' option's type of a Vue component should be a function.
  methods() { // VUE_MISMATCHED_TYPE_OF_OPTION alarm because 'methods' option's type should be an object.
    return {
      handleClick() {
        // do something
      }
    };
  },
  template: '<div @click="handleClick">{{ msg }}</div>'
});

Compliant Code Example

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

Vue.component('hello', {
  data() {
    return { msg: 'hi' };
  },
  methods: {
    handleClick() {
      // do something
    }
  },
  template: '<div @click="handleClick">{{ msg }}</div>'
});

Version

This rule was introduced in DeepScan 1.15.0-beta.

See

  • Lifecycle hooks

  • Data options

  • DOM options

  • Asset options

  • Composition options

  • Miscellaneous options

  • [Vue warn]: The data option should be a function that returns a per-instance value in component definitions.

  • [Vue warn]: Invalid value for option methods: expected an Object, but got Function.

  • [Vue warn]: props must be strings when using array syntax.

  • [Vue warn]: Method foo has an undefined value in the component definition. Did you reference the function correctly?

  • [Vue warn]: invalid template option:[object Object]