Vue Macros

English

简体中文

English

简体中文

Appearance

On this page

defineProps ​

Stability: stable

Correct types of destructured props using $defineProps.

See also Vue issue, Reactivity Transform RFC.

FeaturesSupported
Vue 3✅
Nuxt 3✅
Vue 2✅
TypeScript / Volar Plugin✅

WARNING

Reactivity Transform is required. You should enable it first.

Basic Usage ​

vue
<script setup lang="ts">
//       ⬇️ ReactiveVariable<string[]>
const { foo } = $defineProps<{
  foo: string[]
}>()

//     ⬇️ Ref<string[]>
const fooRef = $$(foo)
</script>

Volar Configuration ​

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