Vue MacrosdefinePropsRefs
Stability:
stableReturns refs from defineProps instead of a reactive object. It can be destructured without losing reactivity.
toRefs(defineProps()) => definePropsRefs()
| Features | Supported |
|---|---|
| Vue 3 | ✅ |
| Nuxt 3 | ✅ |
| Vue 2 | ✅ |
| TypeScript / Volar Plugin | ✅ |
Basic Usage
vue
<script setup lang="ts">
// ✅ won't lose reactivity with destructuring
const { foo, bar } = definePropsRefs<{
foo: string
bar: number
}>()
// ⬇️ Ref<string>
console.log(foo.value, bar.value)
</script>
Volar Configuration
jsonc
// tsconfig.json
{
"vueCompilerOptions": {
"target": 3,
"plugins": [
"@vue-macros/volar/define-props-refs"
// ...more feature
]
}
}