0

I am making a website using vue.js and coreui. The question is i have 2 kinds of user on this website (i.e Admin and Users). What I hope is in the navigation bar when user->(users) is logged in only certain items on the navbar are added. How do I achieve this? I have been reading the documentation and I found no lucks.

I don't know how to override this sidebar template I did tried directly changing @coreui files but it's not reflecting.

Any helps would be appreciated. Thank You

_nav.js

export default {
    items: [
        {
            name: 'Dashboard',
            url: '/dashboard',
            icon: 'icon-speedometer',
            badge: {
                variant: 'primary',
                text: 'NEW'
            }
        },
        {
            title: true,
            name: 'Administrator',
            class: '',
            wrapper: {
                element: '',
                attributes: {}
            }
        },
        {
            name: 'PRC',
            url: '/priority',
            icon: 'icon-layers',
            children: [
                {
                    name: 'PRC Types',
                    url: '/priority',
                    icon: 'icon-puzzle'
                },
                {
                    name: 'PRC Range',
                    url: '/priority/range',
                    icon: 'icon-directions'
                }
            ]
        },

        {
            name: 'Users',
            url: '/users',
            icon: 'icon-user'
        },
        {
            name: 'SubTenant',
            url: '/tenant',
            icon: 'icon-user'
        },
        {
            name: 'Groups',
            url: '/groups',
            icon: 'icon-list'
        },
        {
            name: 'TaskList',
            url: '/tasklist',
            icon: 'icon-list'
        },
        {
            name: 'ProcessList',
            url: '/process',
            icon: 'icon-list'
        },
    ]
}

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import 'core-js/es6/promise'
import 'core-js/es6/string'
import 'core-js/es7/array'
// import cssVars from 'css-vars-ponyfill'
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'
import VueAuth from '@websanova/vue-auth'
import VeeValidate from 'vee-validate';
import Element from 'element-ui'

Vue.use(Element);
Vue.use(VeeValidate);
Vue.use(VueAxios, axios);

Vue.axios.defaults.baseURL = 'http://127.0.0.1:8080/api/v1/client';
Vue.router  = router;
Vue.use(VueAuth, {
    auth: require('@websanova/vue-auth/drivers/auth/bearer.js'),
    http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'),
    router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
    tokenDefaultName:"token",
    tokenStore: ['localStorage', 'cookie'],
    authRedirect: {path: '/auth'},
    notFoundRedirect: {path: '/dashboard'},
    fetchData:{url : "auth" , method : "GET"},
    refreshData:{enabled:false}
  });

Vue.use(BootstrapVue);

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  mounted(){
  },
  methods: {
  },
  components: {
    App
  }
});

And I am not searching for how I do this portion.

Improve this question
12
  • Can you add the link of documentation you are referring?? Commented Feb 14, 2019 at 5:23
  • Possible duplicate of stackoverflow.com/questions/51625394/… Commented Feb 14, 2019 at 5:34
  • But I am not able to override template do you know how I can do this? Commented Feb 14, 2019 at 5:59
  • In coreui I am not getting documentation for override template and I did tried to change into main file also but I don't know what;s going on wrong with that. Commented Feb 14, 2019 at 6:00
  • You don't need to override ,just nee to add v-if and v-else for conditional rendering as below. <template v-if="user=='admin'">code for admin navbar</template><template v-else>code for users navbar</template> Commented Feb 14, 2019 at 6:10
Related questions
0
Vue JS Conditional Rendering
2
Navigation Bar with Vue.js
4
Re-render navigation bar after login on vuejs
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.