noVueReservedProps

JavaScript (and super languages)

Summary

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

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.

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.

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.

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.

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>

How to configure

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