# Dashboard 2.0 - Viewtify treeview

**URL:** <https://discourse.nodered.org/t/dashboard-2-0-viewtify-treeview/85081>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [31 January 2024 15:38 UTC](https://discourse.nodered.org/t/dashboard-2-0-viewtify-treeview/85081 "2024-01-31T15:38:46Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![tobehn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tobehn/32/87871_2.png) [@tobehn](https://discourse.nodered.org/u/tobehn)\
**Post date:** [31 January 2024 15:38 UTC](https://discourse.nodered.org/t/dashboard-2-0-viewtify-treeview/85081/1 "2024-01-31T15:38:47Z")

</div>

I there, i just startet to check out dashboad 2.0 with the idea of using it for some visualisations with my nodered flows.

i came across the treeview component of viewtify:

> **[Treeview — Vuetify.js](https://v15.vuetifyjs.com/en/components/treeview/)**
>
> Treeview component for the Vuetify framework

Would really love to use it to render some data structure hierarchy

I do not get it rendered this data:

```auto

data = [
    {
      "id": 1,
      "name": "Applications :",
      "children": [
        {
          "id": 2,
          "name": "Calendar : app"
        },
        {
          "id": 3,
          "name": "Chrome : app"
        },
        {
          "id": 4,
          "name": "Webstorm : app"
        }
      ]
    },
    {
      "id": 5,
      "name": "Applications :",
      "children": [
        {
          "id": 6,
          "name": "Calendar : app"
        },
        {
          "id": 7,
          "name": "Chrome : app"
        },
        {
          "id": 8,
          "name": "Webstorm : app"
        }
      ]
    }
  ]

msg.payload = data;
return msg;

```

My template code looks like this:

```auto
<template>
  <v-treeview :items="items"></v-treeview>
</template>

<script>
  export default {
    data: () => ({
      items: msg.payload
    })
  }
</script>

```

What is it i am missing? On the dashboard page i get a blank screen.  
Thank yo very much in advance.  
T

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [31 January 2024 17:01 UTC](https://discourse.nodered.org/t/dashboard-2-0-viewtify-treeview/85081/2 "2024-01-31T17:01:44Z")

</div>

That documentation is for vuetify v1.

dashboard-2 uses vuetify v3

See here: [[Task] v-treeview · Issue #13518 · vuetifyjs/vuetify · GitHub](https://github.com/vuetifyjs/vuetify/issues/13518#issuecomment-1881894092)

---

<div class="post-metadata">

**Author:** ![tobehn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tobehn/32/87871_2.png) [@tobehn](https://discourse.nodered.org/u/tobehn)\
**Post date:** [31 January 2024 19:36 UTC](https://discourse.nodered.org/t/dashboard-2-0-viewtify-treeview/85081/3 "2024-01-31T19:36:51Z")

</div>

Ah,.. all right.  
Thank you for the link.  
So it might work in a couple of weeks then?

I will keep an eye on it.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [1 March 2024 19:37 UTC](https://discourse.nodered.org/t/dashboard-2-0-viewtify-treeview/85081/4 "2024-03-01T19:37:01Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.