Javascript is required
Mokkapps Logo

Vue Tip: Provide Fallback Content for Slots

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Jun 8, 2022
1 min read
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:

<template>  <button type="submit">    <slot>      <!-- fallback content -->      Submit    </slot>  </button></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:

<template>  <button type="submit">    <slot>      <!-- fallback component -->      <IconWithText />    </slot>  </button></template>

If you liked this Vue tip, follow me on Twitter to get notified about new tips, blog posts, and more content from me. Alternatively (or additionally), you can also subscribe to my newsletter.