Michael Thiessen

Recursive slots

Invalid Date

I decided to see if I could make a v-for component using only the template. Along the way, I discovered how to use slots recursively, too.

This is what the component looks like:

<!-- VFor.vue -->

<template>

  <div>

    <!-- Render the first item -->

    {{ list[0] }}

    <!-- If we have more items, continue!

         But leave off the item we just rendered -->

    <v-for

      v-if="list.length > 1"

      :list="list.slice(1)"

    />

  </div>

</template>

If you wanted to do this with scoped slots — and why wouldn't you?! — it just takes a few tweaks:

<template>

  <div>

    <!-- Pass the item into the slot to be rendered -->

    <slot v-bind:item="list[0]">

      <!-- Default -->

      {{ list[0] }}

    </slot>



    <v-for

      v-if="list.length > 1"

      :list="list.slice(1)"

    >

      <!-- Recursively pass down scoped slot -->

      <template v-slot="{ item }">

        <slot v-bind:item="item" />

      </template>

    </v-for>

  </div>

</template>

Here is how this component is used:

<template>

  <div>

    <!-- Regular list -->

    <v-for :list="list" />



    <!-- List with bolded items -->

    <v-for :list="list">

      <template v-slot="{ item }">

        <strong>{{ item }}</strong>

      </template>

    </v-for>

  </div>

</template>

For a more detailed explanation of this example and nested slots, check out my blog post on it:

How to Use Nested Slots in Vue (including scoped slots)

Related Articles