How in VUE JS to make it so that when entering the site, only the preloader is displayed until all processes have completed?

Question

Vue.js

How to show preolader in VUE until ALL $http requests have completed and all data from the server has been loaded ?

Answer 1

Add a preloader display to the mounted() component event
, run data loading methods,
remove the preloader when they are completed (using Promise.all)
Read about promises here - https://learn.javascript.ru/promise
Examples :
one request:

mounted() {
  this.showPreloader = true
  this.$http.get('/someUrl').then(response => {
    // данные загружены, убираем прелоадер
    this.showPreloader = false
    // записываем полученные данные куда-либо
    this.someData = response.body
  }, response => {
    // запрос завершился ошибкой
    // показываем сообщение об ошибке
    this.showPreloader = false
    this.showError = true
  });
},

Several requests:

mounted() {
  this.showPreloader = true
  Promise.all([
    this.$http.get('/someUrl'),
    this.$http.get('/someUrl2')
  ]).then(results => {
    // данные загружены, убираем прелоадер
    this.showPreloader = false
  }, response => {
    // один или несколько запросов завершились с ошибкой
    // показываем сообщение об ошибке
    this.showPreloader = false
    this.showError = true
  });
},

PS. The code is valid for single file components using Webpack. ES6 syntax is used.