← Back to rules

vue/no-shared-component-data Correctness

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

What it does

Enforce that the data property of a Vue component definition is a function.

Why is this bad?

When data is declared as an object literal, the same object is shared across every instance of the component, which causes cross-instance state pollution. Returning a fresh object from a function avoids that.

This rule targets component definitions reached through Vue.component(...), Vue.extend(...), Vue.mixin(...), app.component(...), app.mixin(...), component(...), createApp(...), defineComponent(...), defineNuxtComponent(...), and export default {} inside .vue files. new Vue({...}) is not covered (the instance does not share data between components).

Examples

Examples of incorrect code for this rule:

<script>
Vue.component("some-comp", {
  data: {
    foo: "bar",
  },
});
</script>

Examples of correct code for this rule:

<script>
Vue.component("some-comp", {
  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-shared-component-data": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

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

CLI

oxlint --deny vue/no-shared-component-data --vue-plugin

Version

This rule was added in vnext.

References

• Rule Source
• Open rule in Oxc Playground