Vue Macros

English

简体中文

English

简体中文

Appearance

On this page

chainCall ​

Stability: experimental ⚠️ Experimental feature, use at your risk

Extends defineProps, support call withDefaults as a chain.

FeaturesSupported
Vue 3✅
Nuxt 3❓
Vue 2❓
TypeScript✅
Volar Plugin❌

TIP

  • chainCall does not support definePropsRefs
  • To fully support TypeScript, you need to import this macro from unplugin-vue-macros/macros.

Basic Usage ​

vue
<script setup lang="ts">
const props = defineProps<{
  foo?: string
  bar?: number[]
  baz?: boolean
}>().withDefaults({
  foo: '111',
  bar: () => [1, 2, 3],
})
</script>
Compiled Code
vue
<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    foo?: string
    bar?: number[]
    baz?: boolean
  }>(),
  {
    foo: '111',
    bar: () => [1, 2, 3],
  }
)
</script>

Also support props destructuring and JSX:

vue
<script setup lang="tsx">
const { foo } = defineProps<{ foo: string }>().withDefaults({
  foo: '111',
})
</script>

TypeScript ​

To fully support TypeScript, you need to import this macro from unplugin-vue-macros/macros with specific syntax.

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

defineProps<{
  /* ... */
}>().withDefaults({
  /* ... */
})
// ✅ type safe
</script>

Works without import assertion, but tsc will report an error:

ts
defineProps<{
  /* ... */
}>().withDefaults({
  /* ... */
})
// ❌ Property 'withDefaults' does not exist on type 'DefineProps<{ /* ... */ }>'.