Default Content and Extension Points

Slots in Vue can have default content, but my favourite use is to create extension points.

Basically, you take any part of a component, wrap it in a slot, and now you can override that part of the component with whatever you want:

<button class="button" @click="$emit('click')">
<!-- Adding in the slot tag does nothing at first -->
<!-- We can override this by providing content to the slot -->
<div class="formatting">
{{ text }}

By default it'll still work the way it always has, but now you have more options.

You can use this component in a couple different ways. The easy, default way, or your own, custom way:

<!-- Uses default functionality of the component -->
<ButtonWithExtensionPoint text="Formatted text" />
<!-- Use the extension point to create custom behaviour -->
<div class="different-formatting">
Do something a little different here

I cover this technique in much more depth, along with many others, in my course, Reusable Components.

Here's a demo that you can dive into if you want to play around with this idea:

Edit on CodeSandbox