Michael Hoffmann LogoMichael Hoffmann
·
0 min read

Vue Tip: Provide Fallback Content for Slots

Vue Tip: Provide Fallback Content for Slots Image
Template

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 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.

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.