Show plain HTML before Vue.js loads

Question

I have an avatar widget built with Vue.js on a sidebar in my app. It takes a split-second to load and this causes the sidebar to jank. Is there a way that I can show plain HTML in place of the Vue app while it is loading? Basically the opposite of v-cloak .

Answer 1

You can manually show html using beforeCreate yada beforeMount.

new Vue({
  el: '#editor',
  data: {
    input: '# hello'
  },
  beforeCreate: function () {
    this.a = "First Value";
    console.log("First Value");
  },
  created: function () {
    this.a = "Second Value";
    console.log("Second Value");
  },
  beforeMount: function () {
    this.a = "Third Value";
    console.log("Third Value");
  }
})

https://v2.vuejs.org/v2/guide/instance.html