# 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

# 🚀 Version

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

# 🔍 Implementation

← vue/no-ref-as-operand vue/no-v-for-template-key-on-child →