# vue/no-setup-props-destructure

disallow destructuring of props passed to setup

  • ⚙️ 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".

# 📖 Rule Details

This rule reports the destructuring of props passed to setup causing the value to lose reactivity.

<script> export default { /* ✓ GOOD */ setup(props) { watch(() => { console.log(props.count) }) return () => { return h('div', props.count) } } } </script>
Now loading...

Destructuring the props passed to setup will cause the value to lose reactivity.

<script> export default { /* ✗ BAD */ setup({ count }) { watch(() => { console.log(count) // not going to detect changes }) return () => { return h('div', count) // not going to update } } } </script>
Now loading...

Also, destructuring in root scope of setup() should error, but ok inside nested callbacks or returned render functions:

<script> export default { setup(props) { /* ✗ BAD */ const { count } = props watch(() => { /* ✓ GOOD */ const { count } = props console.log(count) }) return () => { /* ✓ GOOD */ const { count } = props return h('div', count) } } } </script>
Now loading...

# 🔧 Options

Nothing.

# 📚 Further Reading

# 🚀 Version

This rule was introduced in eslint-plugin-vue v7.0.0

# 🔍 Implementation

Last Updated: 5/11/2022, 11:50:07 PM