[Vuejs]-How to create dynamic sidebar links in vue.js?

by

0👍

✅

You can create a main component for the menu that will take care of getting all the links in the store and that will return the array items

// Create this component ./main.vue
//file main.vue

import lazyLoading from './lazyLoading'

/* I presume you have a field named items in your store 
 and it has this architecture : 

items: [{ name: 'Dashboard',path: '/dashboard',meta: {
        icon: 'fa-tachometer',link: 'dashboard/index.vue'},
        component: "dashboard"},
        { name: 'chart',path: '/chart',meta: {
        icon: 'fa-chart',link: 'chart/index.vue'},
        component: "chart"}, ...etc]
*/  
var items = this.$store.state.items 

for (i in items) {
items[i].component = lazyLoading(items[i].component, true)
}

export default items;

Then, you can import main.vue and insert it in index.js

//file index.js

import items from "./main"

const state = {
  items:items
}

I have not really tested it but I hope it will work and will help you

👤Aboubacar Ouattara

Leave a comment