How to have a page with or without q-drawer

s.molinari

Ok. See if this is getting closer.

https://codesandbox.io/s/objective-kirch-jsono?file=/src/layouts/MainLayout.vue

Scott

DarkLite1

Still no e-mail I’m afraid.

DarkLite1

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.

s.molinari

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.

Scott

DarkLite1

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.

s.molinari

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.

Scott

DarkLite1

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.

qyloxe

@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.

s.molinari

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

https://codesandbox.io/s/blissful-bird-01usn?file=/src/store/index.js

Scott

DarkLite1

Yup, that fixed it. Thanks Scott.