Return value of function-typed Vue options should be a valid type

  • VUE_BAD_API_RETURN_VALUE
  • Error
  • Medium
  • vue

This rule applies when the return value of a function-typed Vue option is invalid.

If an invalid value is returned from a function-typed Vue option, it may cause a problem when Vue uses the value. Even when no immediate problem occurs, the value becomes meaningless.

The options which cause problem for an invalid return value are listed below with the valid return values:

  1. data(): Object
  2. render() for non-functional components: any value except Array
  3. renderError(): any value except Array
  4. errorCaptured() lifecycle hook: false, undefined, or null

Vue outputs a warning message in the cases of data(), render(), and renderError().

Also, this rule checks the following lifecycle hooks which need no return value:

  1. beforeCreate()
  2. created()
  3. beforeMount()
  4. mounted()
  5. beforeUpdate()
  6. updated()
  7. activated()
  8. deactivated()
  9. beforeDestroy()
  10. destroyed()

In the above cases, returning a value has no effect.

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() {
    return 'data'; // VUE_BAD_API_RETURN_VALUE alarm because 'data()' does not return an object.
  },
  render(h) {
    return [<div>{this.data}</div>, <div>Hello</div>]; // VUE_BAD_API_RETURN_VALUE alarm because 'render()' returns an array and the component is not functional.
  },
  beforeCreate() {
    return true; // VUE_BAD_API_RETURN_VALUE alarm because 'beforeCreate()' does not need a return value.
  }
});

Compliant Code Example

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

Vue.component('hello', {
  data() {
    return { msg: 'hi' };
  },
  render(h) {
    return <div>{this.msg}</div>;
  },
  beforeCreate() {
    // do something
  }
});

Version

This rule was introduced in DeepScan 1.14.0-beta.

See