src/content/docs/linter/rules/no-vue-data-object-declaration.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> ## Summary - Rule available since: `v2.1.4` - Diagnostic Category: [`lint/correctness/noVueDataObjectDeclaration`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule has a [**safe**](/linter/#safe-fixes) fix. - The default severity of this rule is [**error**](/reference/diagnostics#error). - This rule belongs to the following domains: - [`vue`](/linter/domains#vue) - Sources: - Inspired from [`vue/no-deprecated-data-object-declaration`](https://eslint.vuejs.org/rules/no-deprecated-data-object-declaration) - Inspired from [`vue/no-shared-component-data`](https://eslint.vuejs.org/rules/no-shared-component-data){
"linter": {
"rules": {
"correctness": {
"noVueDataObjectDeclaration": "error"
}
}
}
}
Enforce that Vue component data options are declared as functions.
In Vue 3+, defining data as an object is deprecated because it leads to shared mutable state across component instances.
This rule flags usages of data: { … } and offers an automatic fix to convert it into a function returning that object.
See also:
– Vue Migration Guide – Data Option: https://v3-migration.vuejs.org/breaking-changes/data-option.html :contentReference[oaicite:0]{index=0}
– ESLint Plugin Vue: no-deprecated-data-object-declaration: https://eslint.vuejs.org/rules/no-deprecated-data-object-declaration :contentReference[oaicite:1]{index=1}
// component-local data via function
export default {
/* ✗ BAD */
data: { foo: null },
};
// Composition API helper also deprecated
defineComponent({
/* ✗ BAD */
data: { message: 'hi' }
});
// Vue 3 entrypoint via createApp
createApp({
/* ✗ BAD */
data: { active: true }
}).mount('#app');
// component-local data via function
export default {
/* ✓ GOOD */
data() {
return { foo: null };
}
};
// global registration with function syntax
Vue.component('my-comp', {
/* ✓ GOOD */
data: function () {
return { count: 0 };
}
});
// Composition API and createApp entrypoints
defineComponent({
/* ✓ GOOD */
data() {
return { message: 'hi' };
}
});
createApp({
/* ✓ GOOD */
data: function() {
return { active: true };
}
}).mount('#app');