# vue/no-shared-component-data
enforce component's data property to be a function
- ⚙️ This rule is included in all of
"plugin:vue/vue3-essential","plugin:vue/essential","plugin:vue/vue3-strongly-recommended","plugin:vue/strongly-recommended","plugin:vue/vue3-recommended"and"plugin:vue/recommended". - 🔧 The
--fixoption on the command line (opens new window) can automatically fix some of the problems reported by this rule.
When using the data property on a component (i.e. anywhere except on new Vue), the value must be a function that returns an object.
# 📖 Rule Details
When the value of data is an object, it’s shared across all instances of a component.
<script>
/* ✓ GOOD */
Vue.component('some-comp', {
data: function () {
return {
foo: 'bar'
}
}
})
export default {
data () {
return {
foo: 'bar'
}
}
}
</script>
<script>
/* ✗ BAD */
Vue.component('some-comp', {
data: {
foo: 'bar'
}
})
export default {
data: {
foo: 'bar'
}
}
</script>
# 🔧 Options
Nothing.
# 📚 Further Reading
- Style guide (for v2) - Component data (opens new window)
- API - data (opens new window)
- API (for v2) - data (opens new window)
# 🚀 Version
This rule was introduced in eslint-plugin-vue v3.8.0