<template>
  <vue-tree-navigation />
</template>

<template>
  <vue-tree-navigation :items="items" />
</template>
<script>
  export default {
    data() {
      return {
        items: [
          { name: 'Products', children: [
            { name: 'Shoes', path: 'shoes' }
          ]},
          { name: 'About', path: 'about', children: [
            { name: 'Contact', path: 'contact', children: [
              { name: 'E-mail', element: 'email' },
              { name: 'Phone', element: 'phone' }
            ]},
          ]},
          { name: 'Github', external: 'https://github.com' },
        ],
      };
    },
  };
</script>

<script src="https://unpkg.com/vue-tree-navigation@4.0.0/dist/vue-tree-navigation.js"></script>
<script>
  Vue.use(VueTreeNavigation)
</script>

<div id="app">
  <vue-tree-navigation :items="items" :defaultOpenLevel="1" />
</div>
<script>
  Vue.use(VueTreeNavigation)
  const app = new Vue({
    el: '#app',
    data: {
      items: [
        ...
      ],
    }
  })
</script>