---
# Don't modify this file manually. This file is auto generated from source, and you will lose your changes next time the website is built.
# Head to the `biomejs/biome` repository, and modify the source code in there.

title: noVueDataObjectDeclaration
description: Learn more about noVueDataObjectDeclaration
---
import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
<TabItem label="JavaScript (and super languages)" icon="seti:javascript">
:::caution
This rule is part of the [nursery](/linter/#nursery) group. This means that it is experimental and the behavior can change at any time.
:::
## Summary
- Rule available since: `v2.1.4`
- Diagnostic Category: [`lint/nursery/noVueDataObjectDeclaration`](/reference/diagnostics#diagnostic-category)
- This rule has a [**safe**](/linter/#safe-fixes) fix.
- The default severity of this rule is [**information**](/reference/diagnostics#information).
- 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)

## How to configure
```json title="biome.json"
{
	"linter": {
		"rules": {
			"nursery": {
				"noVueDataObjectDeclaration": "error"
			}
		}
	}
}

```
## Description
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}

## Examples

### Invalid

```js
// component-local data via function
export default {
  /* ✗ BAD */
  data: { foo: null },
};
```

```js
// Composition API helper also deprecated
defineComponent({
  /* ✗ BAD */
  data: { message: 'hi' }
});
```

```js
// Vue 3 entrypoint via createApp
createApp({
  /* ✗ BAD */
  data: { active: true }
}).mount('#app');
```

### Valid

```js
// component-local data via function
export default {
  /* ✓ GOOD */
  data() {
    return { foo: null };
  }
};
```

```js
// global registration with function syntax
Vue.component('my-comp', {
  /* ✓ GOOD */
  data: function () {
    return { count: 0 };
  }
});
```

```js
// Composition API and createApp entrypoints
defineComponent({
  /* ✓ GOOD */
  data() {
    return { message: 'hi' };
  }
});

createApp({
  /* ✓ GOOD */
  data: function() {
    return { active: true };
  }
}).mount('#app');
```

## Related links

- [Disable a rule](/linter/#disable-a-rule)
- [Configure the code fix](/linter#configure-the-code-fix)
- [Rule options](/linter/#rule-options)
- [Source Code](https://github.com/biomejs/biome/blob/main/crates/biome_js_analyze/src/lint/nursery/no_vue_data_object_declaration.rs)
- [Test Cases](https://github.com/biomejs/biome/blob/main/crates/biome_js_analyze/tests/specs/nursery/noVueDataObjectDeclaration)

</TabItem>
</Tabs>