src/content/docs/linter/rules/no-vue-reserved-props.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> ## Summary - Rule available since: `v2.1.2` - Diagnostic Category: [`lint/correctness/noVueReservedProps`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule doesn't have a fix. - The default severity of this rule is [**error**](/reference/diagnostics#error). - This rule belongs to the following domains: - [`vue`](/linter/domains#vue) - Sources: - Same as [`vue/no-reserved-props`](https://eslint.vuejs.org/rules/no-reserved-props){
"linter": {
"rules": {
"correctness": {
"noVueReservedProps": "error"
}
}
}
}
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<script setup>
defineProps({
ref: String,
});
</script>
import {defineComponent} from 'vue';
export default defineComponent({
props: [
'key',
]
});
<script setup lang="ts">
defineProps<{
ref: string,
}>();
</script>
<script>
export default {
props: {
key: String,
}
};
</script>
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>