definePropsRefs

Stability: stable

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

With Default Value

vue

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

Volar Configuration

tsconfig.json

jsonc

{  "vueCompilerOptions": {  "plugins": ["vue-macros/volar"],  }, }

Contributors

Kevin Deng

zhiyuanzmj

Leo

Changelog

Last edited 8 months ago

View full history

definePropsRefs ​

Basic Usage ​

With Default Value ​

Volar Configuration ​