Как правильно сделать preloader на Vue.js?

Question

[myskypesla]

Всем привет.

Есть проект, при переходе по роутам должен включаться preloader и пока не загрузится контент, прелоадер должен быть активным, потом исчезнуть.

Есть компонент Preloader.vue, пока что реализовал так, но это просто временный вариант, чтобы сверстать 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>

Вопрос: как сделать полноценный, чтобы пока не загрузился весь контент на странице, его не убирать? Попробовал через ready() и created(), но данные методы работают только при первоначальном рендере.

Comments

[Nik_Set_7]

Это комментарий для людей, которые будут читать в будущем.
Можно сделать следующем образом:
1. Взять уже готовый и удобный для кастомизации предзагрузчик
https://sergeyloysha.github.io/vue-spinner-component/
2. Создать миксин (локальный или глобальный), в котором будут методы, которые смогут включать или выключать предзагрузчик. За включение и выключение должна отвечать переменная - состояние предзагрузчика.
Это состояние можно сохранить во Vuex.
3. Сам компонент предзагрузчика поместить в соответствующий компонент.э

Answer 1

[Evgeny Kulakov]

Можно шаблоне рутового компонента его определить. И если используется vuex, то завести свойство стейта showloader, делать его false|true в зависимости от того, когда нужно показать или спрятать этот loader.

Comments

[myskypesla]

Evgeny Kulakov Рутовый компонент это App.vue? Я попробовал сделать, тогда в шаблоне preloader указываю v-show: "this.$parent.loader", но компонент Preloader.vue также почему-то не берёт данные отсюда.
P.S. Хочу без vuex сделать, потому что он особо не нужен в данном проекте.

[myskypesla]

Evgeny Kulakov А по второму вопросу подскажете, как сделать появление после полной загрузки?

[myskypesla]

myskypesla, Кстати сегодня в App.vue перенёс код и заработало :)

[Evgeny Kulakov]

myskypesla, что вы называете полной загрузкой? подписывайтесь на событие по которому эта полная загрузка происходит, прячьте лоадер показывайте основной контент.