Vue Tip: Provide Fallback Content for Slots

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>