How to have a page with or without q-drawer

  • Thanks Scott, I finally figured out how to use it. Great tool you guys have! Really really really cool that you can share code like this.

    Feel free to have a look if you want.

  • I wish codesandbox was our tool. 🙂 But, it’s just another great OSS project, where we have a template in place to collaborate on.


  • Ok. So, I’ll be honest, I’m a bit lost as to what the goal is again or where the problem lies. 😊 Can you give me a quick explanation on what you are stuck on?


  • Yes of course, no prob. I’m already super grateful about the Quasar community. It’s so nice when you’re not left out alone in the cold when exploring a new tool. My specialty is actually PowerShell, that’s my day to day job, writing scripts for automation. But then the time comes that they need some website to launch those scripts and a website for users to be able to request something with a new ticket. Enough rant…

    The requirements are visible on the Home page, also called ‘Index.vue’. What I would like it to do is to show a custom drawer depending on the q-tab selected at the top of the page.

    For exampe: When a user clicks on the Home tab he is redirected to the Home page where no drawer is present. When he clicks on the Tickets tab he is redirected to the ‘MyTickets.vue’ page and the drawer is visible with 3 links to other pages (NewTicket.vue, MyTickets.vue and FollowUp.vue). When he clicks any of those it would be great that the tab Tickets would stay highlted (as in active) and that the tab he clicked would be active too, as that is his current page.

    What happens now is if he clicks ‘MyTickets.vue’ the drawer correcty highlights in yellow the ‘My tickets’ q-item but no longer highliths ‘Tickets’ in yellow. That should still be highlighted as ‘MyTickets’ is a sub section of Tickets on the website.

    It should also be possible to have the same drawer for ‘Links’ for exmaple but then with other sections for the links page in it.

    I hope this makes sense…

  • @s-molinari hi Scott, could you post a small message here? So I can check if I get the email. Watched is on and I’ll close the brower tab waiting for the mail.

  • Still no e-mail I’m afraid.

  • Thank you Scott for updating my code. Eventually I’ve ended up doing it this way. By just feeding in the needed links in the routes.js file. This does exacty what I want.

    Some things I have issues with:

    • Webiste not reloading on state change in the store. (Github)
      When I change something in the file ‘/store/navigation/state.js’, say I change ‘label: “About”’ to ‘label: “About2222”’, the webpage is not reloaded automatically. Quasar detects the change as I see it re-running in the terminal when I save the change but the browser needs a manually F5 or refresh. Don’t know if this is me, Quasar or a plugin that is failing.

    • Keep the header link active
      When I click on Tickets it gets correctly underlined. When I then select ‘New ticket’ the underlining is gone on the Tickets in the header bar. I would love it if this could stay for clicking all pages withn the side drawer of Tickets.

    The sanbox is now updated, so you can see what I mean. On a side note, there are still no emails coming through. I tripple checked my email address, junk and setting here below this topic.

  • I just got my first email notification, so that is working.

    Remember that just because you update a state value in a Vuex file, it doesn’t mean that state changes automatically propagates into your app via HMR. Remember, we are using a “reactive” system and it only “reacts” to changes made in the application state, i.e. some kind of internal event.

    You’ll need to figure out how to read from the router the path and reset activeTab whenever the sub-route changes.


  • I hear you Scott with regards to the events triggering a state change and in turn trigger an element in the DOM to be updaetd, whcih then also reloads parts of the page as it’s Vue.js reactivity. However, in the case of developping an app a developer might change some values in some files. At that time a re-rerender or reload of the page would be nice. To see if the changes made have the correct behaviour/styling/effed. So when I run quasar dev in the command line, I expect Quasar to reload my browser window on code change. Maybe I’m seeing this wrong…

    You are correct, I’ll put the activeTab within the store.state. This ways I can set the correct classess on the q-tabs in the header.

  • Are you seeing the HMR not working on your local dev environment? Because, I just tested it (roughly) by changing a value in Vuex locally and the value was updated in the browser.


  • For me that didn’t work. I see Quasar reloading as it detects the changed file of state.js but the browser isn’t get a ping to reload. However, when I then reload the browser page myself I do see the new value appearing. You can test it with the my codesandbox.

  • @DarkLite1 said in How to have a page with or without q-drawer:

    For me that didn’t work.

    could you remove all your node_modules and install everything again? There was a time, when I had similar problem with HMR and cleaning node_modules helped.

  • You had some code added to the Vuex/ Store index.js file. That seems to be what was stopping the codesandbox from refreshing.


  • Yup, that fixed it. Thanks Scott.

Log in to reply