Skip to content

noVueReservedProps

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
<script setup>
defineProps({
ref: String,
});
</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.

import {defineComponent} from 'vue';
export default defineComponent({
props: [
'key',
]
});
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.

<script setup lang="ts">
defineProps<{
ref: string,
}>();
</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.

<script>
export default {
props: {
key: String,
}
};
</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.

import {defineComponent} from 'vue';
export default defineComponent({
props: ['foo']
});
<script setup>
defineProps({ foo: String });
</script>
<script setup lang="ts">
defineProps<{
foo: string,
bar: string,
}>();
</script>
<script>
export default {
props: {
foo: String,
bar: String,
}
};
</script>
biome.json
{
"linter": {
"rules": {
"nursery": {
"noVueReservedProps": "error"
}
}
}
}