A Tree That Represents The Routes Structure Component For Vue 3

vue-3-router-tree-component

Vue 3 router tree component can be used to represent routes or items as a tree view. represents your paths or elements as a tree view, by default it takes the paths configuration as elements, but you can provide your own custom elements that respect the following format.

typescript tree component, vue tree list, vue d3 tree, vue tree drag and drop, v tree vue

How to make use of it:

Install and download:

# NPM
$ npm i vue3-router-tree --save

1. Import the Vue3RouterTree component.

import { defineComponent } from 'vue';
import Vue3RouterTree from 'vue3-router-tree';

2. Add the component to the template.

<template>
  <div class="demo">
    <vue3-router-tree :items="routes"> </vue3-router-tree>
  </div>
</template>

3. Define your paths as follows:

export default defineComponent({
  data() {
    return {
      routes: [
        {
          path: '/',
          name: 'Home',
          hasIcon: true,
        },
        {
          path: '/dashboard',
          name: 'Dashboard',
          hasIcon: true,
        },
        {
          path: '/component',
          name: 'Components',
          hasIcon: true,
          children: [
            {
              path: '/alerts',
              name: 'Alerts',
            },
            {
              path: '/avatars',
              name: 'Avatars',
            },
            {
              path: '/buttons',
              name: 'Buttons',
            },
            {
              path: '/forms',
              name: 'Forms',
              children: [
                {
                  path: '/autocompletes',
                  name: 'Autocompletes',
                },
                {
                  path: '/checkboxes',
                  name: 'Checkboxes',
                },
              ],
            },
          ],
        },
      ],
    };
  },
});

Props :

Namedefaultdescription
items[]the tree items or if not provided the component renders the current available routes
active-color“#5d1df1”the color of the active sub node
default-openspecify the default opened path
exclude-fieldIn your route config you could specify a field inside meta option which will be used to exclude
open-allExpand all items that have children

Slots :

Namedescription
itemoverride the default item rendering

Router Tree Component, Vue 3 router tree Plugin/Github


See Demo And Download

Official Website(boussadjra): Click Here

This superior jQuery/javascript plugin is developed by boussadjra. For extra Advanced Usages, please go to the official website.