Newbie Question: Changing main vue q-drawer from other views

  • I am building my first quasar app. I am starting with the basic build. On MainLayout.vue there is a q-drawer that acts as global menu that appears on all other views. I want to give the user different menu options if they are logged in or a guest. What is the best way to do this?

    My idea was to create two lists. If the user wasn’t logged in show list1, loggedin show list2.

    I created to 2 lists with components and used v-if to determine if shown. This concept works.

    <q-list v-if="ConfigVal.isLoggedIn == true" >

    If I set the value in the data area, the menus work.

    I thought that since I want to access the loggedin status from multiple vues I should use a global variable to store that info. I have a configuration file that stores the globalvariable - isLoggedIn and I import that file into the MainLayout.vue.

    this is where I start to have problems.

    1. I get an error that it is unable to get property ConfigVal.isLoggedIn but I can get the value in the data section of MainLayout.vue so I know the import works. (I’ve tried setting a local value of loggedin to the global - the error goes away but nothing happens if I change the global value)
    2. If I change the value of isLoggedIn on another vue, nothing happens on the mainlayout.vue.

    There must be some naming/reference convention that I don’t understand yet.
    In the quasar/vue world how do I do this?

    Thanks for your help

    I’ve also tried to no avail. (If the DOM refreshes because of change/save in the code, it updates, but that is it)

     computed: {
        curLogIn: function () {
          return ConfigVal.isLoggedIn;
        curLogIn: function(oldLog,newLog){
          console.log("saw change");
          curLogIn = Configval.isLoggedIn;

  • You may find this helpful:
    Globally Hide or Show Left Drawer on MainLayout Page

Log in to reply