Skip to content
Patterns.codes
Index

[Vue.js] Components with multiple slots

Tested with: Vue v3

Use multiple named slots in Vue components to pass different content to different parts of the component.

For example, a layout component with two named slots, left and right for the outer most columns, and a default slot for the middle main column (CSS ommitted for brevity).

Layout.vue
<template>
  <div class="columns">
    <div class="column">
      <slot name="left"></slot>
    </div>
    <main class="column">
      <slot></slot>
    </main>
    <div class="column">
      <slot name="right"></slot>
    </div>
  </div>
</template>

Use the slot attribute to specify the slot name when using the component. And all other projected content will be placed in the default slot.

App.vue
<template>
  <Layout>
    <template #left>
      <div>Left sidebar</div>
    </template>


    <div>Main content</div>


    <template #right>
      <div>Right sidebar</div>
    </template>
  </Layout>
</template>

This renders outs as:

<div class="columns">
  <div class="column">
    <div>Left sidebar</div>
  </div>
  <main class="column">
    <div>Main content</div>
  </main>
  <div class="column">
    <div>Right sidebar</div>
  </div>
</div>