How to Create a Recursive Component In Vue 3

Vue 3 is a popular JavaScript framework that is used to build dynamic user interfaces. It comes with a lot of features that make it easy to create complex components, including the ability to create recursive components. In this blog post, we will explore how to create a recursive component in Vue 3.

What is a recursive component?

A recursive component is a component that contains instances of itself. This means that the component can be nested within itself, creating a tree-like structure. Recursive components are useful when dealing with hierarchical data structures, such as a file system or a nested menu.

Creating a recursive component in Vue 3

<script setup>
defineProps({
    items: {
      type: Array,
      default: () => []
    }
})
</script>

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
      <recursive-component :items="item.children" v-if="item.children" />
    </li>
  </ul>
</template>

The above code is creating a recursive component RecursiveComponentusing the new <script setup> syntax in Vue 3.

The defineProps function is used to define the props for the component. In this case, the component has a single prop called items, which is an array with a default value of an empty array.

The component’s template is defined using the <template> tag, which contains a list element (<ul>) and a v-for directive that iterates over the items prop and renders a list item (<li>) for each item.

The v-if directive is used to check if the current item has children. If it does, the component renders a new instance of itself (<recursive-component>) and passes the children as the items prop. This creates a recursive loop that renders nested lists for each level of the data.

Testing the recursive component

To test the recursive component, render the RecursiveComponentcomponent with some sample data. Here’s an example:

<script setup>
import { ref } from 'vue'
import RecursiveComponent from './components/RecursiveComponent.vue'

const items = ref([
  {
    id: 1,
    name: 'Item 1',
    children: [
      {
        id: 2,
        name: 'Item 1.1',
        children: [
          {
            id: 3,
            name: 'Item 1.1.1'
          }
        ]
      },
      {
        id: 4,
        name: 'Item 1.2'
      }
    ]
  },
  {
    id: 5,
    name: 'Item 2'
  }
])
</script>

<template>
  <div>
    <h1>Recursive Component Example</h1>
    <recursive-component :items="items" />
  </div>
</template>

This code defines a parent component that uses the previously defined RecursiveComponent to render a recursive list of items.

The component imports the ref function from Vue and defines a reactive items variable as an array of objects. Each object represents an item and has an id and a name property. Items can also have a children property, which is an array of nested items.

The component’s template contains a heading and an instance of the RecursiveComponent component. The items variable is passed as the items prop to the RecursiveComponent, which will recursively render the list of items.

When we run the app, we should see a nested list rendered on the page, with each level indented to indicate the nesting. The final output should look something like this:

Recursive Component Example

- Item 1
  - Item 1.1
    - Item 1.1.1
  - Item 1.2
- Item 2

Conclusion

In this post, we explored how to create a recursive component using Vue 3. We started by defining what a recursive component is and why it can be useful, especially when dealing with hierarchical data structures.

We then went on to create a RecursiveComponent in Vue 3, which uses the v-for and v-if directives to recursively render nested components. We also included a defineProps function to define the items prop for the component.

Finally, we provided a simple example of how to use the RecursiveComponent by passing in an array of items as props to render a recursive list.

Overall, creating a recursive component in Vue 3 can be a powerful technique to handle complex data structures and keep your code modular and maintainable. We hope this tutorial has helped you better understand how to create a recursive component in Vue 3 and how it can be used in your own projects.