src/content/docs/linter/rules/no-vue-reserved-keys.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> ## Summary - Rule available since: `v2.1.3` - Diagnostic Category: [`lint/correctness/noVueReservedKeys`](/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-keys`](https://eslint.vuejs.org/rules/no-reserved-keys){
"linter": {
"rules": {
"correctness": {
"noVueReservedKeys": "error"
}
}
}
}
Disallow reserved keys in Vue component data and computed properties.
Vue reserves certain keys for its internal use. Using these reserved keys in data properties, computed properties, methods, or other component options can cause conflicts and unpredictable behavior in your Vue components.
This rule prevents the use of Vue reserved keys such as:
$ (e.g., $el, $data, $props, $refs, etc.)_ in data properties (reserved for Vue internals)<script>
export default {
data: {
$el: '',
},
};
</script>
<script>
export default {
data() {
return {
_foo: 'bar',
};
},
};
</script>
<script>
export default {
computed: {
$data() {
return this.someData;
},
},
};
</script>
<script>
export default {
methods: {
$emit() {
// This conflicts with Vue's built-in $emit
},
},
};
</script>
<script>
export default {
data() {
return {
message: 'Hello Vue!',
count: 0,
};
},
};
</script>
<script>
export default {
computed: {
displayMessage() {
return this.message;
},
},
};
</script>