Javascript is required
Mokkapps LogoMichael Hoffmann

Vue Tip: Provide Fallback Content for Slots

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

<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. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter.