Note

This is a documentation for version 7.0.0-alpha.9.
To check version 6.2.2 go here. To check previous releases go here.

# 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/vue3-strongly-recommended" and "plugin:vue/vue3-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

# 🔍 Implementation