A TreeView Component for Vuejs

A TreeView Component for Vuejs

TreeView for Vue.js A TreeView component for vuejs

TreeView for Vue.js

Vue-TreeView

✨ Incoming Features

  • Bump to vue v3 when ready.
  • Add customizable colours for each node, maybe even styles.
  • Use slot to customize look of node, like icons with images etc. (Will have to look into slot a bit more)

Any future suggestions are welcome

πŸŽ“ Usage

Install the package into your project:

npm install --save @ll931217/vue-treeview

or

yarn add @ll931217/vue-treeview

Add this to your main.js file:

import Vue from 'vue'
import TreeView from '@ll931217/vue-treeview'

Vue.use(TreeView)

Then add this to where you want to use the treeview:

<tree-view :tree="tree">

🌲 Tree

The treeview takes in the prop tree, which is in the following structure:

[
  {
    "text": "Dogs",
    "nodes": [{
      "text": "Germany",
      "nodes": [{
        "text": "American Eskimo Dog",
        "nodes": [{
          "text": "Fluffy",
          "link": {
            "type": "link", // Type `link` will create an `Anchor` tag
            "value": "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/American_Eskimo_Dog_1.jpg/1920px-American_Eskimo_Dog_1.jpg" // URL of the link
          }
        }]
      }, {
        "text": "Bavarian Mountain Hound"
      }, {
        "text": "Boxer",
        "nodes": [{
          "text": "Rip (Router-link)",
          "link": {
            "type": "router-link", // Type `router-link` will create a router-link, duh.
            "key": "path", // key to use when giving it the value, router-link(:to="{ path: '/d-ger-boxer-rip' }")
            "value": "/d-ger-boxer-rip"
          }
        }, {
          "text": "Mackenzie (Router-link)",
          "link": {
            "type": "router-link",
            "key": "name",
            "value": "d-ger-boxer-machenzie"
          }
        }]
      }, {
        "text": "Bullenbeisser"
      }, {
        "text": "Deutsche Bracke",
        "nodes": [{
          "text": "Mini",
          "link": {
            "type": "link",
            "value": "https://animalsbreeds.com/wp-content/uploads/2015/07/Deutsche-Bracke.jpg"
          }
        }]
      }]
    }, {
      "text": "France",
      "nodes": [{
        "text": "Ariegeois"
      }, {
        "text": "Artois Hound"
      }]
    }]
  }, {
    "text": "Cats",
    "nodes": [
      {
        "text": "Russia",
        "nodes": [{
          "text": "Donskoy"
        }, {
          "text": "Kurilian Bobtail"
        }]
      }, {
        "text": "Thailand",
        "nodes": [{
          "text": "Khao Manee"
        }, {
          "text": "Suphalak",
          "nodes": [{
            "text": "Moon",
            "link": {
              "type": "link",
              "value": "https://www.pets4homes.co.uk/images/articles/4198/what-is-a-suphalak-cat-5947aefcd4845.jpg"
            }
          }]
        }]
      }
    ]
  },
  { // >= v0.3.0
    "text": "Standing Up",
    "link": {
      "type": "router-link",
      "key": "path",
      "value": "templink"
    },
    "icon": "cube",
    "nodes": [
      {
        "text": "mixamo.com",
        "link": {
          "type": "router-link",
          "key": "path",
          "value": "templink"
        },
        "icon": "running"
      }
    ]
  }
]

Custom Icons

Default Icons

If you want to use custom icons, you can select them from FontAwesome 5, add them like this:

First download their packages (Solid icons are already available):

Prop Type Required
tree Array True
icons String Object
<template>
  <div id="app">
    <treeview :tree="tree" :icons="icons" />
  </div>
</template>

<script>
import { faChessQueen } from '@fortawesome/free-solid-svg-icons'

import Tree from './tree.json

export default {
  name: 'App',
  data () {
    return {
      tree: Tree,
      icons: {
        closed: 'angle-up',
        opened: 'angle-down',
        default: faChessQueen
      }
    }
  }
}
</script>

Icon for a node

In your node, add an icon object, you can customise the icon for that specific node such as:

{
  "text": "Barbet",
  "icon": "surprise"
}

Toggle whether to show parent node icons

Usage:

<treeview :tree.sync="tree" :editable="true" :show-parent-icon="{ parentShow: true, emptyParentShow: false }" />

The above example will show all icons of parent nodes that has children nodes and hide all empty parent nodes.

NOTE: the prop show-parent-icon can be written as above or showParentIcon, its all up to you.

Default:

showParentIcon: {
  type: Object,
  default: () => ({
    parentShow: false,
    emptyParentShow: false
  })
}

NOTE: Parent nodes with link property will still show their icon. See the JSON tree above, the last object tree, the parent node has link property.

Draggable

<treeview :tree.sync="tree" :editable="true" :draggable="true" />

πŸ’― Tips

Adding .sync to :tree would allow two-way binding for the tree data, if data changed in the child component it will be updated for the entire tree, this feature is good for if you want to save the tree if it changed:

<treeview :tree.sync="tree" />

Double-click the parent node will allow you to add new node to the tree, only if editable prop is passed with the boolean value of true:

<treeview :tree.sync="tree" :editable="true" />

This prop can be used for checking user accounts:

<treeview :tree.sync="tree" :editable="userAccount === 'ADMIN'" />

Download Details:

Author: ll931217

Demo: https://ll931217.github.io/vue-treeview/

Source Code: https://github.com/ll931217/vue-treeview

vue vuejs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.