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?

@RoyJ As far as I know component scripts still get executed even if the template is v-if-ed. Also I would prefer a single global solution, not a v-if in 50 components. — Basaa, Mar 25 '18 at 16:50
v-if is most usable option as @RoyJ stated. Just put v-if your root component (maybe router view) you'll be fine. — Onur Özkan, Mar 25 '18 at 17:26

score 3 · Accepted Answer · answered Mar 25 '18 at 19:38

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...
})();

Delay Vue.JS component loading until promise is resolved

1 Answers1