Delay Vue.JS component loading until promise is resolved

Question

I'm extensively using libsodium.js in a Vue.JS application I'm building. Libsodium.js isn't usable right away, it does some async loading.

Because I use this library in pretty much every .vue component, I need to delay the actual component loading in Vue until libsodium is fully loaded.

I'm imagining something like this:

// My root component
const app = new Vue({
    data() {
        return {
            sodium: null
        }
    },
    el: '#app',
    components: { ... },
    router,
    created() {
        const _sodium = require('libsodium-wrappers');
        (async() => {
            await _sodium.ready;
            this.sodium = _sodium;

            // Start loading the vue-router routes (and thus my components) here
            startLoadingComponents();
        })();
    }
});

What is the best way to accomplish this?

Answer 1

Restructure your code so that the Vue isn't created until sodium is ready.

const _sodium = require('libsodium-wrappers');

function startLoadingComponents(){
  const app = new Vue({
      data() {
          return {
              sodium: _sodium
          }
      },
      el: '#app',
      components: { ... },
      router,
  });  
}

(async() => {
  await _sodium.ready;

  // Start loading the vue-router routes (and thus my components) here
  startLoadingComponents();
  // you could also just really do the new Vue right here...
})();