How to impelement nested template (treeview)

[hsul4n]

Hello everybody, I was wondering if there's a simple way to render a treeview using alpinejs.

Here's what I mean:

<template x-for="node in nodes" x-bind:key="node.id">
    <div>
        <a x-text="node.name"></a>
        <template x-for="child in node.children" x-bind:key="child.id">
            ...
        </template>
    </div>
</template>

<script>
const nodes = [
    {
        id: 1,
        name: 'Node-A',
        children: [
            {
                id: 2,
                name: 'Node-AA',
                children: [
                    {
                        id: 3,
                        name: 'Node-AAA',
                    },
                ]
            },
        ]
    },
]
</script>

Any suggestions?

[SimoTod]

Alpine is not the right tool for this task since the depth is variable and multiple nexted x-for are not too performant. I would use a third party library and start it using x-init.

[hsul4n]

Thanks @SimoTod, I'll use alternative tool for that.