vue-vtree

vue-vtree

Universal and flexible tree component for Vue.js

Installation

NPM

npm install vue-vtree

CDN

jsDelivr

<script src="https://cdn.jsdelivr.net/npm/vue-vtree@latest/dist/v-tree.min.js"></script>

unpkg

<script src="https://unpkg.com/vue-vtree"></script>

Getting Started

In your script entry point:

import Vue from 'vue';
import VTree from 'vue-vtree';
Vue.component('v-tree', VTree);

Usage

Just write one level of tree in scoped-slot and pass children data to empty child v-tree component and it will inherit the parent slot template.

<template>
  <div id="app">
    <v-tree :scope-data="menu">
      <ul slot-scope="menuLevel">
        <li v-for="menuItem in menuLevel">
          <a :href="https://github.com/XAHTEP26/vue-vtree/blob/HEAD/menuItem.url">{{ menuItem.title }}</a>
          <v-tree v-if="menuItem.children" :scope-data="menuItem.children"></v-tree>
        </li>
      </ul>
    </v-tree>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        menu: [
          { title: 'Home', url: '#' },
          {
            title: 'Posts',
            url: '#',
            children: [
              { title: 'Development', url: '#' },
              { title: 'Design', url: '#' },
              { title: 'Other', url: '#' }
            ]
          },
          {
            title: 'Handbooks',
            url: '#',
            children: [
              {
                title: 'HTML',
                url: '#',
                children: [
                  { title: 'a', url: '#' },
                  { title: 'span', url: '#' },
                  { title: 'div', url: '#' }
                ]
              },
              {
                title: 'CSS',
                url: '#',
                children: [
                  { title: 'display', url: '#' },
                  { title: 'position', url: '#' },
                  { title: 'background', url: '#' },
                  { title: 'border', url: '#' }
                ]
              },
            ]
          },
        ]
      }
    }
  }
</script>

Live Demo

Property "scope-data" can take any value.

Demo for JSON

Demo for Number

License

The MIT License