noVueReservedProps
Summary
Section titled “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:
- Sources:
- Same as
vue/no-reserved-props
- Same as
Description
Section titled “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 identificationref
- Used by Vue for template refs
Examples
Section titled “Examples”Invalid
Section titled “Invalid”<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>
How to configure
Section titled “How to configure”{ "linter": { "rules": { "nursery": { "noVueReservedProps": "error" } } }}