[Vuejs]-VueJS lifecycle order when combined with router

by

2👍

✅

here is how I solved it in vue3 but you can use a similar approach… basically don’t mount the app until the initialization is completed. In my case the authCheck in the initialization function you mention full source

import useFirebaseAuth from "./hooks/firebase-auth";

const { authCheck  } = useFirebaseAuth();

const app = createApp(App).use(IonicVue);

authCheck()
  .then(() => {
    app.use(router);
    return router.isReady();
  })
  .then(() => {
    app.mount("#app");
  });

0👍

Yap that is how it suppose to be, the navigation guard is always triggered whenever there is a navigation, meaning it gets executed once it receives your navigation, which is before your component gets created. You can execute anything within your main.js file i don’t fully understand what you want to achieve but you can utilize any of the Vue Js lifecycle hooks(https://v2.vuejs.org/v2/guide/instance.html) to get what you want or the navigation guards(https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards) beforeRouteEnter, beforeRouteLeave and beforeRouteUpdate

They all execute at different times, hope this helps

Leave a comment