VueNuxtViteVueTips & Tricks

Curated collection of practical tips, tricks and best practices for building modern Vue applications.

In Vue 3.5, you can destructure props with reactive default values using native JavaScript syntax — no more `withDefaults()` needed.

<!-- Before (Vue 3.4) -->
<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    count?: number
    message?: string
  }>(),
  {
    count: 0,
    message: 'hello',
  }
)
</script>
<!-- After (Vue 3.5+) -->
<script setup lang="ts">
const { count = 0, message = 'hello' } = defineProps<{
  count?: number
  message?: string
}>()
</script>

<template>
  <p>{{ count }} - {{ message }}</p>
</template>