src/content/docs/linter/rules/no-vue-setup-props-reactivity-loss.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> ## Summary - Rule available since: `v2.2.6` - Diagnostic Category: [`lint/correctness/noVueSetupPropsReactivityLoss`](/reference/diagnostics#diagnostic-category) - This rule isn't recommended, so you need to enable it. - This rule doesn't have a fix. - The default severity of this rule is [**error**](/reference/diagnostics#error). - This rule belongs to the following domains: - [`vue`](/linter/domains#vue) - Sources: - Inspired from [`vue/no-setup-props-reactivity-loss`](https://eslint.vuejs.org/rules/no-setup-props-reactivity-loss){
"linter": {
"rules": {
"correctness": {
"noVueSetupPropsReactivityLoss": "error"
}
}
}
}
Disallow destructuring of props passed to setup in Vue projects.
In Vue's Composition API, props must be accessed as props.propertyName to maintain
reactivity. Destructuring props directly in the setup function parameters will
cause the resulting variables to lose their reactive nature.
export default {
setup({ count }) {
return () => h('div', count);
}
}
export default {
setup(props) {
return () => h('div', props.count);
}
}