How to make a preloader in Vue.js?

Question

Vue.js

Hello.
There is a project, when going through the routes, the preloader should turn on and until the content is loaded, the preloader should be active, then disappear. There is a Preloader.vue
component , so far I have implemented it like this, but this is just a temporary option to lay out the preloader:

<template lang="pug">
  .preloader(v-show="loading")
</template>

export default {
  data() {
    return {
      loading: true,
    };
  },
  mounted() {
    setTimeout(() => {
      this.loading = false;
    }, 2000);
  },
  watch: {
    $route() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 2000);
    },
  },
};
</script>

Question: how to make a full-fledged one, so that until all the content on the page is loaded, do not remove it? I tried through ready() and created(), but these methods only work on the initial render.

Answer 1

You can define it in the root component template. And if vuex is used, then set the showloader state property, make it false|true depending on when you need to show or hide this loader.