Vue prop should be declared properly

  • VUE_BAD_PROP_DECL
  • Error
  • Medium
  • vue

This rule applies when a Vue prop is not declared properly in props option as the following:

  • The right-hand side of a prop declaration can be either null, a constructor function (e.g. String, Number), an array of constructors, or an object with validation requirements. If other value is given, prop validation will not work properly. See Example 1 below.
  • An object with validation requirements can have properties like type, default, validator or required. If a typo exists in property names, prop validation may not work as intended. See Example 2 below.
  • A type property in the requirement object can have either null, a constructor, or an array of constructors. See Example 3 below.
  • In order to avoid the prop validation, it is recommended to use null instead of other falsy values because a programmer can confuse it as a default value. See Example 4 below.

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

Noncompliant Code Example

View with compliant examples side by side
Vue.component('my-component', {
  props: {
    // Example 1
    prop1_1: 42, // VUE_BAD_PROP_DECL alarm
    prop1_2: 'String', // VUE_BAD_PROP_DECL alarm
    prop1_3: String | Number, // VUE_BAD_PROP_DECL alarm

    // Example 2
    prop2_1: {
      Type: String, // VUE_BAD_PROP_DECL alarm
      Default: 'success', // VUE_BAD_PROP_DECL alarm
      validate: function (value) { // VUE_BAD_PROP_DECL alarm
        return ['success', 'warning', 'danger'].indexOf(value) !== 1
      },
      require: true // VUE_BAD_PROP_DECL alarm
    },

    // Example 3
    prop3_1: {
      type: 'String' // VUE_BAD_PROP_DECL alarm
    },

    // Example 4
    prop4_1: '', // VUE_BAD_PROP_DECL alarm
    prop4_2: {
      type: undefined, // VUE_BAD_PROP_DECL alarm
      required: true
    }
  }
});

Compliant Code Example

View with noncompliant examples side by side
Vue.component('my-component', {
  props: {
    // Example 1
    prop1_1: {
      type: Number,
      default: 42
    },
    prop1_2: String,
    prop1_3: [String, Number],

    // Example 2
    prop2_1: {
      type: String,
      default: 'success',
      validator: function (value) {
        return ['success', 'warning', 'danger'].indexOf(value) !== 1
      },
      required: true
    },

    // Example 3
    prop3_1: {
      type: String
    },

    // Example 4
    prop4_1: null,
    prop4_2: {
      type: null,
      required: true
    }
  }
});

Version

This rule was introduced in DeepScan 1.18.0.

See