There are cases when it's useful to specify fallback (i.e. default) content for a slot, to be rendered only when no content is provided:
1<template>
2 <button type="submit">
3 <slot>
4 <!-- fallback content -->
5 Submit
6 </slot>
7 </button>
8</template>The text "Submit" is rendered inside the <button> if the parent didn't provide any slot content.
Alternatively, you can use a complex component that provides default behaviour:
1<template>
2 <button type="submit">
3 <slot>
4 <!-- fallback component -->
5 <IconWithText />
6 </slot>
7 </button>
8</template>If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:
Vue Tip: Debug Computed Properties
We can debug properties by passing computed() a second options object.
Vue Tip: Use Fallthrough Attributes
A 'fallthrough attribute' is an attribute or v-on event listener that is passed to a component, but is not explicitly declared in the receiving component's props or emits. Common examples of this include class, style, and id attributes.