How to load config in Vuex before VueRouter fires?

Question

Vue.js

Hello!
The essence of the problem: you need to load the config from the server in the Vuex repository, which should be picked up by the router as well. But, whatever one may say, the router works earlier than any hooks. The code:

Vue.config.productionTip = false;
Vue.use(VueRouter);
new Vue({
  vuetify,
  store,
  router,
  render: h => h(App),
  async beforeCreate() {
    console.log("Config loading");
    let store = this.$store;
    try {
      let result = await store.dispatch("config/loadMain");
      if (store.getters["user/isAuthenticated"]) {
        return await store.dispatch("config/loadExtra");
      }
      return result;
    } catch (error) {
      store.dispatch("error/raiseHttpError", error);
    }
  }
}).$mount("#app");

How can this be resolved?

Answer 1

Load the config before the application is initialized:

store.dispatch('config/loadMain').then(() => {
  new Vue({
    ...

Answer 2

It’s like this in my quasar, adapting, in principle, is not difficult (for example, redirecting to /loading with the parameter, from where we redirect and from there back by the trigger from watch). And yes, I know that I have a crutch crutch :)

import { Loading } from "quasar";

function aSecond() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve();
    }, 1000);
  });
}

export default ({ router, store, Vue }) => {
  router.beforeEach(async (to, from, next) => {
    if (store.state.catalog.loading) Loading.show();
    while (store.state.catalog.loading) {
      await aSecond();
    }
    Loading.hide();
////
};