Recursive components in Vue

Introduction

Recursive components let a component call itself to show nested or repeating data. This helps display things like trees or menus easily.

Showing a folder structure where folders can have subfolders inside them.

Displaying a nested comment section where comments can have replies.

Building a menu with items that can have sub-items.

Rendering a family tree with parents and children.

Syntax

Vue

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  item: Object
})
</script>

<template>
  <div>
    <p>{{ item.name }}</p>
    <ul v-if="item.children">
      <li v-for="child in item.children" :key="child.id">
        <RecursiveComponent :item="child" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'RecursiveComponent'
}
</script>

The component must have a name option to refer to itself.

Use props to pass data down to each recursive call.

Examples

Basic recursive component showing nested items with children.

Vue

<template>
  <div>
    <p>{{ item.name }}</p>
    <ul v-if="item.children">
      <li v-for="child in item.children" :key="child.id">
        <RecursiveComponent :item="child" />
      </li>
    </ul>
  </div>
</template>

Checks if children exist and have length to avoid empty lists.

Vue

<template>
  <div>
    <p>{{ item.name }}</p>
    <ul v-if="item.children && item.children.length">
      <li v-for="child in item.children" :key="child.id">
        <RecursiveComponent :item="child" />
      </li>
    </ul>
  </div>
</template>

Recursive component template using self-reference by name (no explicit import needed).

Vue

<template>
  <div>
    <p>{{ item.name }}</p>
    <ul v-if="item.children">
      <li v-for="child in item.children" :key="child.id">
        <RecursiveComponent :item="child" />
      </li>
    </ul>
  </div>
</template>

Sample Program

This example shows a tree structure with nested children. The RecursiveComponent calls itself to render each child node. The indentation grows with each level.

Vue

<script setup>
const treeData = {
  id: 1,
  name: 'Root',
  children: [
    {
      id: 2,
      name: 'Child 1',
      children: [
        { id: 3, name: 'Grandchild 1' },
        { id: 4, name: 'Grandchild 2' }
      ]
    },
    { id: 5, name: 'Child 2' }
  ]
}
</script>

<template>
  <RecursiveComponent :item="treeData" />
</template>

<script>
export default {
  name: 'App',
  components: {
    RecursiveComponent: () => import('./RecursiveComponent.vue')
  }
}
</script>

Important Notes

Recursive components can cause infinite loops if data is circular. Always ensure data ends.

Time complexity depends on the number of nodes; each node is rendered once.

Use recursive components when data is naturally nested and unknown depth.

Summary

Recursive components let a component call itself to show nested data.

They are great for trees, menus, and nested comments.

Always pass data via props and name the component for self-reference.