Javascript is required
ยท
0 min read

Vue Tip: Provide Fallback Content for Slots

Vue Tip: Provide Fallback Content for Slots Image

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:

I will never share any of your personal data. You can unsubscribe at any time.