• The migration guide lists various use cases for app plugins, among them the usage of vuex-router-sync:

    You want to interfere with the Vuex store instance - An example would be to use vuex-router-sync package

    So that’s what I want to do, but I must miss something, because I can’t figure out how. First I installed the package ‘vuex-router-sync’ from here.

    Then I created an app plugin called ‘router.js’ like this

    // import something here
    import { sync } from 'vuex-router-sync'
    // leave the export, even if you don't use it
    export default ({ app, router, store, Vue }) => {
     // setup sync
     const unsync = sync(store, router)

    and registered the plugin in quasar.conf.js. The default function is called, I checked this. However, I cannot access the route from the state property in the store so it doesn’t get extended. What am I missing?


  • Okay got it. If you read the vuex documentation ( carefully, not like I did, then you will find out that the ‘rootState’ is always passed on as third argument:

    Also, inside module getters, the root state will be exposed as their 3rd argument…

    This will allow you to access the route plugin and state.

  • Hello there, I’m having trouble getting this to work and I don’t know why. I’m using quasar v1 and have a boot file that is being called (I checked) with the code above. However when I inspect the rootState object available in an action in the store I don’t have any route property. Anyone any ideas?

  • As of 5-26-2020, this works for me, boot file name router.js, not using vuex modules.

    import { sync } from 'vuex-router-sync';
    import { boot } from 'quasar/wrappers';
    export default boot(({ router, store }) => {
      sync(store, router);

Log in to reply