How to have a page with or without q-drawer
-
Ok. See if this is getting closer.
https://codesandbox.io/s/objective-kirch-jsono?file=/src/layouts/MainLayout.vue
Scott
-
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.Scott
-
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.
Scott
-
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.https://codesandbox.io/s/blissful-bird-01usn?file=/src/store/index.js
Scott
-
Yup, that fixed it. Thanks Scott.