https://github.com/boussadjra/vue3-router-tree
Tree that represents the routes structure
https://github.com/boussadjra/vue3-router-tree
javascript sidebar-menu treeview typescript vue-components vuejs vuejs3
Last synced: 1 day ago
JSON representation
Tree that represents the routes structure
- Host: GitHub
- URL: https://github.com/boussadjra/vue3-router-tree
- Owner: boussadjra
- Created: 2020-10-01T22:49:22.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-01-10T23:32:09.000Z (over 4 years ago)
- Last Synced: 2025-09-30T14:47:40.305Z (11 days ago)
- Topics: javascript, sidebar-menu, treeview, typescript, vue-components, vuejs, vuejs3
- Language: Vue
- Homepage: https://boussadjra.github.io/vue3-router-tree/
- Size: 3.86 MB
- Stars: 34
- Watchers: 4
- Forks: 6
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue 3 router tree
This component is based on **Vue.js 3**, it represents your routes or items as a tree view, by default takes it takes the routes configuration as items, but you could provide your custom items that respects the following format :
```js
[
{
path:'/somePath',//optional
name:'someName',//required
component:SomeComponent //optional but if it's provided the tree node will be a link that redirects to this component
children:[
]
}
]
```
You could also add any other field that you need it when you want to customize the items rendering
## Demo
[LIVE DEMO](https://boussadjra.github.io/vue3-router-tree/) or you could check this [boilerplate](https://codesandbox.io/s/vue-3-router-tree-demo-wzxr1?file=/src/App.vue) on codesandbox
## Installation
npm install vue3-router-tree --save
## Usage
#### With router :
```html
```
#### with custom items :
```html
import { defineComponent } from 'vue';
import Vue3RouterTree from 'vue3-router-tree';
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 |