Skip to content

definePropsRefs

Stability: stable

Returns refs from defineProps instead of a reactive object. It can be destructured without losing reactivity.

toRefs(defineProps()) => definePropsRefs()

FeaturesSupported
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
}>()
console
.
log
(
foo
.
value
,
bar
.
value
)
</script>

With Default Value

vue
<script setup lang="ts">
import { 
withDefaults
} from 'unplugin-vue-macros/macros'
const {
foo
} =
withDefaults
(
definePropsRefs
<{
foo
?: string
}>(), {
foo
: 'test' },
)
console
.
log
(
foo
.value)
</script>

Volar Configuration

jsonc
// tsconfig.json
{
  "vueCompilerOptions": {
    "target": 3,
    "plugins": [
      "@vue-macros/volar/define-props-refs",
      // ...more feature
    ],
  },
}

Contributors

The avatar of contributor named as renovate[bot] renovate[bot]
The avatar of contributor named as gaokefei gaokefei
The avatar of contributor named as zhiyuanzmj zhiyuanzmj
The avatar of contributor named as Kevin Deng Kevin Deng

Changelog