useVuePropTypeConstructor (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/useVuePropTypeConstructor
This rule has an unsafe fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/require-prop-type-constructor

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useVuePropTypeConstructor": "error"
6
      }
7
    }
8
  }
9
}

Description

Require the type of a Vue prop to be a constructor.

Vue checks the value passed to a prop against the type the prop declares. That type must be a constructor, such as String, Number or a class, or an array of constructors. A common mistake is to write the name of the type as a string, as in type: 'String'. Vue can’t check values against a string, so the prop loses the checks and the behavior of its type. For example, a prop declared with type: 'Boolean' isn’t set to true when the attribute is written without a value.

This rule reports prop types written as a string, a template string, a number, a boolean, a regular expression, a binary operation such as Foo + '', or an increment or decrement such as i++. null is allowed, because Vue treats it as “any type”. It checks props declared through the props option and through defineProps().

Examples

Invalid

1
<script>
2
export default {
3
  props: {
4
    size: 'Number',
5
  },
6
};
7
</script>

code-block.vue:4:11 lint/nursery/useVuePropTypeConstructor  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The type of the prop size is not a constructor.
  
    2 │ export default {
    3 │   props: {
  > 4 │     size: 'Number',
      │           ^^^^^^^^
    5 │   },
    6 │ };
  
  ℹ Vue uses the type of a prop to check the values passed to it. It can only do that with a constructor, such as String or Number, or with an array of constructors.
  
  ℹ Replace this value with the constructor of the type the prop accepts.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Use the constructor Number instead.
  
    4 │ ····size:·'Number',
      │           -      -

1
<script>
2
export default {
3
  props: {
4
    value: ['Number', String],
5
  },
6
};
7
</script>

code-block.vue:4:13 lint/nursery/useVuePropTypeConstructor  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The type of the prop value is not a constructor.
  
    2 │ export default {
    3 │   props: {
  > 4 │     value: ['Number', String],
      │             ^^^^^^^^
    5 │   },
    6 │ };
  
  ℹ Vue uses the type of a prop to check the values passed to it. It can only do that with a constructor, such as String or Number, or with an array of constructors.
  
  ℹ Replace this value with the constructor of the type the prop accepts.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Use the constructor Number instead.
  
    4 │ ····value:·['Number',·String],
      │             -      -

1
<script setup>
2
defineProps({
3
  options: {
4
    type: 'Object',
5
    default: () => ({}),
6
  },
7
});
8
</script>

code-block.vue:4:11 lint/nursery/useVuePropTypeConstructor  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The type of the prop options is not a constructor.
  
    2 │ defineProps({
    3 │   options: {
  > 4 │     type: 'Object',
      │           ^^^^^^^^
    5 │     default: () => ({}),
    6 │   },
  
  ℹ Vue uses the type of a prop to check the values passed to it. It can only do that with a constructor, such as String or Number, or with an array of constructors.
  
  ℹ Replace this value with the constructor of the type the prop accepts.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Use the constructor Object instead.
  
    4 │ ····type:·'Object',
      │           -      -

Valid

1
<script>
2
export default {
3
  props: {
4
    size: Number,
5
    value: [Number, String],
6
    options: {
7
      type: Object,
8
      default: () => ({}),
9
    },
10
    anything: null,
11
  },
12
};
13
</script>