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, undefined, a constructor, or an array of constructors. See Example 3 below.
  • In order to avoid the prop validation, it is recommended to use null or undefined instead of other falsy values because a programmer can confuse it as a default value. See Example 4 below.
  • An object value should not be directly used as the default value of a prop. You should use a factory function that returns the object. See Example 5 below.

Noncompliant Code Example

View with compliant examples side by side
<script>
export default {
  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: {
      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: {
      type: 'String' // VUE_BAD_PROP_DECL alarm
    },

    // Example 4
    prop4: '', // VUE_BAD_PROP_DECL alarm

    // Example 5
    prop5: {
      type: Array,
      default: [] // VUE_BAD_PROP_DECL alarm
    }
  }
}
</script>

Compliant Code Example

View with noncompliant examples side by side
<script>
export default {
  props: {
    // Example 1
    prop1_1: {
      type: Number,
      default: 42
    },
    prop1_2: String,
    prop1_3: [String, Number],

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

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

    // Example 4
    prop4: null,

    // Example 5
    prop5: {
      type: Array,
      default: function () {
        return [];
      }
    }
  }
}
</script>

Version

This rule was introduced in DeepScan 1.18.0.

See

Was this documentation helpful?