Michael Thiessen

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:

<template>

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

    <slot>

      <div class="formatting">

        {{ text }}

      </div>

    </slot>

  </button>

</template>

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

<ButtonWithExtensionPoint>

  <div class="different-formatting">

    Do something a little different here

  </div>

</ButtonWithExtensionPoint>

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

Related Articles

Want to level up your Vue skills?

With over two million reads and 11,067 subscribers, you've come to the right place.

Subscribe now to get exclusive insights and tips every week.