vue-tree-navigation

vue-tree-navigation

Vue.js 2 tree navigation with vue-router support

For more information see documentation/demo

Example

<template>
  <vue-tree-navigation :items="items" :defaultOpenLevel="1" />
</template>

<script>
  export default {
    data() {
      return {
        items: [
          { name: 'Products', children: [                       // category label
            { name: 'Shoes', route: 'shoes' }                   // #/shoes
          ]},
          { name: 'About', route: 'about', children: [          // #/about
            { name: 'Contact', route: 'contact', children: [    // #/about/contact       
              { name: 'E-mail', element: 'email' },             // #/about/contact#email
              { name: 'Phone', element: 'phone' }               // #/about/contact#phone
            ]},
          ]},
        ],
      };
    },
  };
</script>

Demo

You can visit this codepen for a simple demo. Please see documentation/demo for more examples including vue-router.

Installation

Include with a script tag

<script src="https://unpkg.com/vue-tree-navigation@2.1.2/dist/vue-tree-navigation.js"></script>

<script>
  Vue.use(VueTreeNavigation)
</script>

NPM

$ npm install vue-tree-navigation

main.js

import VueTreeNavigation from 'vue-tree-navigation';

Vue.use(VueTreeNavigation);

Requirements

• Vue.js
• vue-router (optional, only when you wish to use router links)

Developers

$ yarn dev

$ yarn build

$ yarn prettier
$ yarn lint

$ yarn unit
$ yarn unit --verbose