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 :
| Name | default | description |
|---|---|---|
| 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-open | ” | specify the default opened path |
| exclude-field | ” | In your route config you could specify a field inside meta option which will be used to exclude |
| open-all | ” | Expand all items that have children |
Slots :
| Name | description |
|---|---|
| item | override 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.