noVueReservedProps

Ce contenu n’est pas encore disponible dans votre langue.

JavaScript (and super languages)

Summary

Rule available since: v2.1.2
Diagnostic Category: lint/nursery/noVueReservedProps
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/no-reserved-props

How to configure

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

Description

Disallow reserved names to be used as props.

Vue reserves certain prop names for its internal use. Using these reserved names as prop names can cause conflicts and unexpected behavior in your Vue components.

This rule prevents the use of the following reserved prop names:

key - Used by Vue for list rendering and component identification
ref - Used by Vue for template refs

Examples

Invalid

1
<script setup>
2
defineProps({
3
    ref: String,
4
});
5
</script>

code-block.vue:2:5 lint/nursery/noVueReservedProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ ref is a reserved attribute and cannot be used as props.
  
    1 │ defineProps({
  > 2 │     ref: String,
      │     ^^^
    3 │ });
    4 │ 
  
  ℹ Rename the prop to avoid possible conflicts.
  
  ℹ 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
import {defineComponent} from 'vue';
2

3
export default defineComponent({
4
    props: [
5
        'key',
6
    ]
7
});

code-block.js:5:9 lint/nursery/noVueReservedProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ key is a reserved attribute and cannot be used as props.
  
    3 │ export default defineComponent({
    4 │     props: [
  > 5 │         ‘key’,
      │         ^^^^^
    6 │     ]
    7 │ });
  
  ℹ Rename the prop to avoid possible conflicts.
  
  ℹ 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 lang="ts">
2
defineProps<{
3
    ref: string,
4
}>();
5
</script>

code-block.vue:2:5 lint/nursery/noVueReservedProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ ref is a reserved attribute and cannot be used as props.
  
    1 │ defineProps<{
  > 2 │     ref: string,
      │     ^^^
    3 │ }>();
    4 │ 
  
  ℹ Rename the prop to avoid possible conflicts.
  
  ℹ 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
        key: String,
5
    }
6
};
7
</script>

code-block.vue:3:9 lint/nursery/noVueReservedProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ key is a reserved attribute and cannot be used as props.
  
    1 │ export default {
    2 │     props: {
  > 3 │         key: String,
      │         ^^^
    4 │     }
    5 │ };
  
  ℹ Rename the prop to avoid possible conflicts.
  
  ℹ 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
import {defineComponent} from 'vue';
2

3
export default defineComponent({
4
    props: ['foo']
5
});

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

1
<script setup lang="ts">
2
defineProps<{
3
    foo: string,
4
    bar: string,
5
}>();
6
</script>

1
<script>
2
export default {
3
    props: {
4
        foo: String,
5
        bar: String,
6
    }
7
};
8
</script>