Recursion is something every developer must learn at one point or another. I had been taught in school to seek recursive solutions to certain problems, but coming up with that solution on my own — in the wild — felt like a signal that I was ready for professional web development.

During a contract gig last summer, I needed to create a sort of accordion interface for a client’s dashboard. Thanks to help from Alex Regan, I ended up with a recursive implementation. It seemed to be the most readable and extendible way to go about creating the UI. In the process, we learned about some more advanced features that Vue.js has to offer: custom render methods and slots. This particular solution is perfect for any kind of drill-down interface, like nested comments and displays where details remain hidden by a few clicks.

A visualization of a tree data structure with infinite leaves and branches.

It should also be noted that an iterative solution can often lead to a more performant and readable solution, as described at various points in my coworker’s latest blog post.

This article isn’t about iterative vs. recursive solutions — please don’t hurt me.

Let’s get the important stuff out of the way…

Source Code: https://github.com/kylemh/recursive_vue_component

Live App: https://kylemh.com/recursive_vue_component/

Similar Article: https://vuejsdevelopers.com/2017/10/23/vue-js-tree-menu-recursive-components/