Vuetify — Treeviews

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Treeview

We can add a treeview with the v-treeview component.

To use it, we can write:

<template>
  <v-treeview :items="items"></v-treeview>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: [
      {
        id: 1,
        name: "Applications",
        children: [
          { id: 2, name: "Calendar" },
          { id: 3, name: "Chrome" },
        ],
      },
      {
        id: 5,
        name: "Framework",
        children: [
          {
            id: 6,
            name: "vuetify",
            children: [
              {
                id: 7,
                name: "src",
                children: [
                  { id: 8, name: "index" },
                  { id: 9, name: "bootstrap" },
                ],
              },
            ],
          },
          {
            id: 10,
            name: "material",
            children: [
              {
                id: 11,
                name: "src",
                children: [
                  { id: 12, name: "v-btn" },
                  { id: 13, name: "v-card" },
                ],
              },
            ],
          },
        ],
      },
    ],
  }),
};
</script>

We have the items state with an array of items in it.

Each object has the id and name properties with the Node ID and name to display.

And the children property has an array with objects with the same properties.

Then we just pass that to the v-treeview ‘s item prop.

Dense Mode

We can make the entries take up less space with the dense prop:

<template>
  <v-treeview :items="items" dense></v-treeview>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: [
      {
        id: 1,
        name: "Applications",
        children: [
          { id: 2, name: "Calendar" },
          { id: 3, name: "Chrome" },
        ],
      },
      {
        id: 5,
        name: "Framework",
        children: [
          {
            id: 6,
            name: "vuetify",
            children: [
              {
                id: 7,
                name: "src",
                children: [
                  { id: 8, name: "index" },
                  { id: 9, name: "bootstrap" },
                ],
              },
            ],
          },
          {
            id: 10,
            name: "material",
            children: [
              {
                id: 11,
                name: "src",
                children: [
                  { id: 12, name: "v-btn" },
                  { id: 13, name: "v-card" },
                ],
              },
            ],
          },
        ],
      },
    ],
  }),
};
</script>

Color

The text and background color of the entries can be changed:

<template>
  <v-treeview :items="items" color="primary" activatable></v-treeview>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: [
      {
        id: 1,
        name: "Applications",
        children: [
          { id: 2, name: "Calendar" },
          { id: 3, name: "Chrome" },
        ],
      },
      {
        id: 5,
        name: "Framework",
        children: [
          {
            id: 6,
            name: "vuetify",
            children: [
              {
                id: 7,
                name: "src",
                children: [
                  { id: 8, name: "index" },
                  { id: 9, name: "bootstrap" },
                ],
              },
            ],
          },
          {
            id: 10,
            name: "material",
            children: [
              {
                id: 11,
                name: "src",
                children: [
                  { id: 12, name: "v-btn" },
                  { id: 13, name: "v-card" },
                ],
              },
            ],
          },
        ],
      },
    ],
  }),
};
</script>

We added the activatable and the color props so that the background color is shown when we click on the entry.

Conclusion

Vuetify comes with a treeview component to let us display items in a tree.