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 '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

Kevin Deng

Changelog

Last edited about 11 hours ago

View full history

definePropsRefs ​

Basic Usage ​

With Default Value ​

Volar Configuration ​