Passing through slots in Vue

Why use wrapper components?

Here’s a couple of examples as to use cases for wrapper components we’ve implemented in southcoastweb projects:

Input Components

If you’re creating inputs components, they’re going to share a lot of presentation logic and potentially validation logic. You obviously don’t want to have to copypaste this into your text input, your password input, your select input, your textarea input et al. So you’d probably want to have a BaseInput component with this common presentation logic, e.g.

1<template>
2	<div class="input">
3		<div class="input__content">
4			<div class="input__prepend">
5				<slot name="prepend"></slot>
6			</div>
7			<div class="input__element">
8				<slot></slot>
9			</div>
10			<div class="input__append">
11				<slot name="append">
12			</div>
13		</div>
14		<div class="input__messages">
15			<slot name="messages"></slot>
16		</div>
17	</div>
18</template>

Obviously there’d be more involved in a base input, but since this article is about slots, we’ll focus on those.

Datatables

In some of our backend UI projects, we use the Vuetify UI framework. In admin panels, the Datatable is probably the most common component used after Button. To allow these datatables to interact with our backend with as little boilerplate code as possible, we use a wrapper component for <v-data-table>. Vuetify’s data table has a lot of slots we may want to use so once more, we need a way to pass through those slots.

The wrong way

Consider the following in our input wrapper example. This is a potential TextInput component:

1<template>
2	<BaseInput class="input--text">
3		<template #prepend><slot name="prepend"></slot></template>
4		<input type="text" />
5		<template #append><slot name="append"></slot></template>
6		<template #messages><slot name="message"></slot></template>
7	</BaseInput>
8</template>
9
10<script setup>
11import BaseInput from "components/BaseInput.vue";
12</script>

This would work, but that’s a lot of boilerplate code, the kind we want to avoid. Additionally, it requires us to statically declare every slot we want to pass through to the BaseInput component. In cases like the DataTable wrapper, this simply isn’t possible since we’ll often be dynamically declaring slots that we want to use based on the columns in the table. We’d also have to keep every input component up-to-date with the slots available in the base component.

A better way

Instead, we can use the $slots property available in the <template> and iterate over it.

1<template>
2	<BaseInput class="testing">
3    	<template v-for="(_, name) in $slots" #[name]="slotData">
4			<slot :name="name" v-bind="slotData" />
5		</template>
6		<input type="text" />
7  </BaseInput>
8<template>

Let’s break down how this works:

The <template> tag is how we tell the BaseComponent that we want to put the content inside the tag into its slot by the same name.

We do a v-for="(_, name) in $slots" to iterate over all the slots passed to our InputText component. The _ is the render function of the slot itself. Since we’re not using this, we can call it anything that signifies this fact. The name property is the one we’re interested in.

The #[name] is where we define the name of the slot we want this <template> to represent. # is Vue shorthand for v-slot:

Then inside the <template>, we’re using a <slot> tag to tell our InputText component to create a slot by the same name (:name) as the template and to pass through any slot content to the BaseInput component.

Finally, there’s the slotData. This is Vue’s way of passing props between the wrapping slot and the inner slot (i.e. from BaseInput to InputText). For more information on this, see the Scoped Slots section of the Vue docs.

In render functions

This whole process is ridiculously easy inside render functions, you barely have to do anything at all:

1import { h } from "vue";
2import BaseInput from "./BaseInput.vue";
3
4export default {
5  setup(props, { slots }) {
6    return () =>
7      h(
8        BaseInput,
9        {
10          class: "input--text",
11        },
12        slots
13      );
14  },
15};

and that’s it. All the slotProps are automatically passed through in addition to the slots themselves.

Differences in Vue 2

SlotProps came pretty late to the party in Vue 2. When they arrived, it was necessary to have two entirely separate properties to handle slots without props and slots with props, thus the $slots and $scopedSlots properties were required to awkwardly co-exist inside Vue 2.

So in Vue 2, to get the same effect as above, you’d need something like:

1<template>
2	<BaseInput>
3 		<slot v-for="(_, name) in $slots" :name="name" :slot="name" />
4  		<template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
5			<slot :name="name" v-bind="slotData" />
6		</template>
7		<input type="text" />
8	</BaseInput>
9</template>

This separately iterates over the old $slots property, and then the $scopedSlots property and passes through the slotProps data.