useVueTypedProps (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.4
Diagnostic Category: lint/nursery/useVueTypedProps
This rule doesn’t have a fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/require-prop-types

How to configure

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

Description

Require a type for every prop of a Vue component.

A prop’s type tells Vue what kind of value to expect. When a parent passes a value of the wrong kind, Vue warns about it during development. A prop declared without a type accepts anything, so these mistakes go unnoticed, and readers of the component can’t tell what the prop is for.

This rule checks props declared through the props option, defineProps(), and defineModel(). A prop counts as typed when it names a type, either as a constructor such as String, in a type option, or with a TypeScript type, or when it has a validator function.

Examples

Invalid

1
<script>
2
export default {
3
  props: ["title"],
4
};
5
</script>

code-block.vue:3:11 lint/nursery/useVueTypedProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The prop title has no type.
  
    1 │ <script>
    2 │ export default {
  > 3 │   props: ["title"],
      │           ^^^^^^^
    4 │ };
    5 │ </script>
  
  ℹ Without a type, Vue accepts any value for this prop and can't warn when a component receives the wrong kind of value.
  
  ℹ Declare the type of the prop, for example with String or { type: String }.
  
  ℹ 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.

1
<script>
2
export default {
3
  props: {
4
    title: { default: "" },
5
  },
6
};
7
</script>

code-block.vue:4:5 lint/nursery/useVueTypedProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The prop title has no type.
  
    2 │ export default {
    3 │   props: {
  > 4 │     title: { default: "" },
      │     ^^^^^
    5 │   },
    6 │ };
  
  ℹ Without a type, Vue accepts any value for this prop and can't warn when a component receives the wrong kind of value.
  
  ℹ Declare the type of the prop, for example with String or { type: String }.
  
  ℹ 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.

1
<script setup>
2
defineProps({ title: {} });
3
</script>

code-block.vue:2:15 lint/nursery/useVueTypedProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The prop title has no type.
  
    1 │ <script setup>
  > 2 │ defineProps({ title: {} });
      │               ^^^^^
    3 │ </script>
    4 │ 
  
  ℹ Without a type, Vue accepts any value for this prop and can't warn when a component receives the wrong kind of value.
  
  ℹ Declare the type of the prop, for example with String or { type: String }.
  
  ℹ 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.

1
<script setup>
2
const title = defineModel("title");
3
</script>

code-block.vue:2:27 lint/nursery/useVueTypedProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The prop title has no type.
  
    1 │ <script setup>
  > 2 │ const title = defineModel("title");
      │                           ^^^^^^^
    3 │ </script>
    4 │ 
  
  ℹ Without a type, Vue accepts any value for this prop and can't warn when a component receives the wrong kind of value.
  
  ℹ Declare the type of the prop, for example with String or { type: String }.
  
  ℹ 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.

Valid

1
<script>
2
export default {
3
  props: {
4
    title: String,
5
    size: [Number, String],
6
    status: { type: String, required: true },
7
    level: { validator: (value) => value > 0 },
8
  },
9
};
10
</script>

1
<script setup lang="ts">
2
defineProps<{ title: string }>();
3
const count = defineModel<number>("count");
4
const visible = defineModel("visible", { type: Boolean });
5
</script>