← Back to rules

vue/no-deprecated-data-object-declaration Correctness

🚧 An auto-fix is planned for this rule, but not implemented at this time.

What it does

Disallow object declaration on data (in Vue.js 3.0.0+).

Why is this bad?

In Vue 3, declaring data as an object causes the same object to be shared between every instance of the component, which leads to cross- instance state pollution. data must be a function that returns a fresh object per instance.

Examples

Examples of incorrect code for this rule:

<script>
export default {
  data: {
    foo: "bar",
  },
};
</script>

Examples of correct code for this rule:

<script>
export default {
  data() {
    return { foo: "bar" };
  },
};
</script>

How to use

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

{
  "plugins": ["vue"],
  "rules": {
    "vue/no-deprecated-data-object-declaration": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["vue"],
  rules: {
    "vue/no-deprecated-data-object-declaration": "error",
  },
});

CLI

oxlint --deny vue/no-deprecated-data-object-declaration --vue-plugin

Version

This rule was added in v1.62.0.

References

• Rule Source
• Open rule in Oxc Playground