Search code examples
vue.jsconfigwaitstartup

How can I load JSON config file and let the Vue app wait for this?

A typical scenario for me is:

  • a Vue app (packed with webpack, BTW)
  • a separate config file for configuring the app

The config file should not be included in the webpacked deployment package, since it is server-dependent (database credentials etc.)

For some reason I am not intending to elaborate on here I keep the config in a JSON file.

So the question is:

How can I delay "starting" the Vue app until the JSON config file has been loaded (and parsed) from the backend?

I know how to load and parse, but the question for me is Vue-specific: what's the best practice to "wait" for something before starting the whole thing?

(Is something like beforeCreate lifecycle hook in the App.vue component the way to go? Does it play nice with asynchronous tasks like loading a JSON file over the net?)

Solution

  • One way that I have used to solve this kind of issue is to use the router.beforeEach. Here is an example of my code:

    router.beforeEach(async (to, from, next) => {
  if (!store.state.initialized) {
    // the store initialize will set initialized to true
    await store.dispatch('initialize')
  }
  // if user not logged in or the route is not public
  if (!store.state.user && !to.meta.public) {
    next('/login')
  } else {
    next();
  }
});