Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/MisRob/vue-tree-navigation
Vue.js tree navigation with vue-router support
https://github.com/MisRob/vue-tree-navigation
navigation tree vue
Last synced: about 2 months ago
JSON representation
Vue.js tree navigation with vue-router support
- Host: GitHub
- URL: https://github.com/MisRob/vue-tree-navigation
- Owner: J3-Tech
- License: mit
- Created: 2017-12-27T16:54:16.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-12-25T03:54:42.000Z (9 months ago)
- Last Synced: 2024-04-14T20:57:45.113Z (5 months ago)
- Topics: navigation, tree, vue
- Language: Vue
- Homepage: https://vue-tree-navigation.j3-tech.com
- Size: 2.54 MB
- Stars: 160
- Watchers: 10
- Forks: 23
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-tree-navigation
[](https://www.npmjs.com/package/vue-tree-navigation)
[](https://github.com/J3-Tech/Vue-Tree-Navigation/actions/workflows/node.js.yml)
[](https://github.com/J3-Tech/Vue-Tree-Navigation/actions/workflows/deploy.yaml)
[](https://codecov.io/gh/J3-Tech/Vue-Tree-Navigation)
> Vue.js tree navigation with vue-router support
For more detailed information see [documentation/demo](https://vue-tree-navigation.j3-tech.com)
## Features
- unlimited number of levels
- optional [vue-router](https://router.vuejs.org/en/) support (v2.0.0 or higher)
- generate navigation items automatically from _vue-router_ routes or define them manually
- define a default open level
- auto-open a level when a corresponding URL visited
- focused on core functionality, only necessary styles included
- elements are provided with meaningful classes to make customizations comfortable (for example `NavigationItem--active`, `NavigationLevel--level-1`, `NavigationLevel--closed`)
## Example
### 1. Navigation items generated from _vue-router_ routes
Let's suppose you use _vue-router_ with the following routes definition
```javascript
const routes = [
{
name: 'Home',
path: '/',
},
{
name: 'Running',
path: '/running',
children: [
{
name: 'Barefoot',
path: 'barefoot',
},
],
},
{
name: 'Yoga',
path: '/yoga',
children: [
{
name: 'Mats',
path: 'mats',
},
{
name: 'Tops',
path: 'tops',
},
],
},
{
name: 'About',
path: '/about',
children: [
{
name: 'Career',
path: 'career',
children: [
{
name: 'Design',
path: 'design',
},
],
},
],
},
];
```
Then simply include _vue-tree-navigation_
```html
```
and it will generate the following menu:
```
- Home // --> /
- Running // --> /running
- Barefoot // --> /running/barefoot
- Yoga // --> /yoga
- Mats // --> /yoga/mats
- Tops // --> /yoga/tops
- About // --> /about
- Career // --> /about/career
- Design // --> /about/career/design
```
Do not forget to use named routes since _vue-tree-navigation_ uses `name` field to label navigation items.
### 2. Menu items defined manually
The following configuration
```html
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' },
],
};
},
};
```
will generate
```
- Products // category label
- Shoes // --> /shoes
- About // --> /about
- Contact // --> /about/contact
- E-mail // --> /about/contact#email
- Phone // --> /about/contact#phone
- Github // --> https://github.com
```
For more examples see [documentation/demo](https://vue-tree-navigation.j3-tech.com)
## Installation
### NPM
```console
$ npm install vue-tree-navigation
```
_main.js_
```javascript
import VueTreeNavigation from 'vue-tree-navigation';
Vue.use(VueTreeNavigation);
```
### Include with a script tag
```html
Vue.use(VueTreeNavigation)
```
_Example_
```html
Vue.use(VueTreeNavigation)
const app = new Vue({
el: '#app',
data: {
items: [
...
],
}
})
```
## Requirements
- [Vue.js](https://v2.vuejs.org/)
## Developers
```console
$ yarn dev
$ yarn build
$ yarn prettier
$ yarn lint
$ yarn unit
$ yarn unit --verbose
$ yarn e2e
```