[VueJS2] Loader avant d'afficher l'app

Rouli
Javascript

Bonjour,

Je suis entrains de coder un site en utilisant VueJS 2, mais je rencontre une petite difficulté...

En gros j'aimerais pouvoir detecter lorsque mon app est entierement chargée et donc ensuite passer isLoaded à true. Comme ça en attendant que tout soit chargé, le loader est affiché et ensuite ma vue est affichée.

Voilà où j'en suis:

Mon main.js :

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes: [{
    path: '/',
    component: require('./components/Home.vue')
  }, {
    path: '/lab',
    component: require('./components/Lab.vue')
  }, {
    path: '*',
    redirect: '/'
  }]
})

new Vue({
  el: '#app',
  router,
  render: h => h(require('./App.vue'))
})

Mon App.vue

<template>
  <div id="app">
    <div class="load" v-if="!isLoaded"></div>
    <router-view v-if="isLoaded"></router-view>
  </div>
</template>

<script>
  export default {
    data () {
        return {
            isLoaded: false
        }
    }
  }
</script>

Comment pourrais-je m'y prendre ?

Merci d'avance,

3 réponses

Axis

De memoire, il y a une partie sur ce sujet dans la vidéo de @Grafikart : Module de commentaires : Frontend

C'est sur un module de commentaire avec Laravel mais tu peux l'adapter à ton code.

Rouli
Auteur

Merci pour ta réponse rapide, mais je pense que ce soit le même système...

Voici le sien: 

sendComment: function () {
    this.loading = true
    this.addComment({
        commentable_id: id,
        .
        . etc
        .
        reply: this.reply
    }).catch((response) => {
        console.log('ERRORS', response.data)
    }).then(() => {
        this.loading = false
    })
}

En gros quand il clique pour envoyer un commentaire, ça active le chargement, ça fait toute les actions dont il a besoin ça met fin au chargement.

Moi j'aurais besoin d'une fonction qui detecte une fois que tout la page est chargé et une fois que c'est fait que la fonction change la valeur de isLoaded.

Rouli
Auteur

Personne n'a d'idée ?