Как вызвать прелоадер vue-loading-spinner на главной странице, пока главнй компонент не загрузился?

Question

[Иван Орлов]

Хочу вызвать прелоадер на главной странице пока не загрузился главнй компонент vue приложения.
Задействовал vue-loading-spinner. Но спинер не появляется
Вот мой код

<template>
<div>
<div style="position: absolute; z-index: 4; margin: 0 auto; top: 64px; width: 100%">
            <main_search  v-if="main_search"></main_search>
            <card v-if="show_card" :change="get_change_card"></card>
        </div>
        <double-bounce v-if="loading"></double-bounce>
</div>
</template>
<script>
    import card from "../cards/main_card"
    import {DoubleBounce} from 'vue-loading-spinner';

export default {
        components: {
            card,
            DoubleBounce
},
beforeCreate: function() {
            this.loading = true;
            console.log("beforeCreate");
        },
data: () => ({
            loading: false,
},
 created(){
             console.log('created');
             this.loading = false;
        },

Comments

[Сергей delphinpro]

вы в created() уже прячете спиннер, а он отобразится только после монтирования.

Answer 1

[Сергей delphinpro]

отдельный спиннер на странице, вне главного контейнера (#app), по дефолту видимый. Примерно так

.spinner { display: none; }
body:not(.app-mounted) .spinner {
  display: block;
}

и обработка события

new Vue({
  …
  mounted(){
    this.$nextTick(()=>document.body.classList.add('app-mounted'));
  }
});

Comments

[Иван Орлов]

Как в компоненте написать? Это вы через css реализовали

[Сергей delphinpro]

Иван Орлов, примерно так: