Vue Macros

English

简体中文

English

简体中文

Appearance

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

With Default Value ​

vue
<script setup lang="ts">
import { withDefaults } from 'unplugin-vue-macros/macros' assert { type: 'macro' }

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

const { foo } = withDefaults(
  definePropsRefs<{
    foo?: string
  }>(),
  { foo: 'test' }
)
//          ⬇️ Ref<string>
console.log(foo.value)
</script>

Volar Configuration ​

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