Simple Tree View Component For Vue.js App

Install & Download:

# Yarn
$ yarn add @ll931217/vue-treeview
# NPM
$ npm install @ll931217/vue-treeview --save

Description:

Just another simple tree view component for Vue.js apps.

How to use it:

1. Import and register the treeview component.

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

Vue.use(TreeView)

2. Add the component to your app.

<tree-view :tree="tree">

3. Define your tree structure as follows:

[
  {
    "text": "JavaScript",
    "nodes": [{
      "text": "React",
      "nodes": [{
        "text": "React.js",
        "nodes": [{
          "text": "React.js",
          "link": {
            "type": "link", // Type `link` will create an `Anchor` tag
            "value": "/path/to/url/" // URL of the link
          }
        }]
      }, {
        "text": "React Native"
      }]
    },{
      "text": "Vue",
      "nodes": [{
        "text": "Vue 2"
      }, {
        "text": "Vue3"
      }]
    }]
  },
  { // >= v0.3.0
    "text": "JavaScript",
    "link": {
      "type": "router-link",
      "key": "path",
      "value": "templink"
    },
    "icon": "cube",
    "nodes": [
      {
        "text": "Vanilla JavaScript",
        "link": {
          "type": "router-link",
          "key": "path",
          "value": "templink"
        },
        "icon": "running"
      }
    ]
  }
]

4. Available component props.

tree: {
  type: Array,
  required: true,
  default: () => []
},
icons: {
  type: Object,
  default: () => ({
    closed: "plus-square",
    opened: "minus-square",
    default: "truck-loading"
  })
},
editable: {
  type: Boolean,
  default: () => false
},
expanded: {
  type: Boolean,
  default: () => false
},
draggable: {
  type: Boolean,
  default: false
},
showParentIcon: {
  type: Object,
  default: () => ({
    parentShow: false,
    emptyParentShow: false,
  })
}

Preview:

Changelog:

v0.4.0 (06/27/2022)

• Refactor

v0.3.0 (03/27/2020)

• Parent nodes can become links
• Parent nodes and empty parent nodes can toggle whether to show icon
• Icons of EVERY node can be customisable
• Creating a new node by double clicking on empty parent nodes or double clicking on the +/- symbols
• Fixed a display issue where the text “Double click to create new node” is shown all the time