title: Vue - How to avoid a content flash before Vue loads
body: <p>I see my header and footer, which are outside router-view flash for a few ms before vue is loaded and a loader is applied to the page (see gif). How do I avoid this behavior and straight away show a loader?</p>
  
  <p>I am using v-cloak but it doesn't seem to work.</p>
  
  <p><a href="https://i.stack.imgur.com/1jm9F.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1jm9F.gif" alt="enter image description here"></a></p>
  
  <p>App.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;div 
      id="cq-app"
      @click="handleClicks"&gt;
      &lt;div v-cloak style="min-height:100vh;"&gt;
        &lt;header-main /&gt;
  
        &lt;transition
          name="fade"
          mode="out-in"
          @after-leave="updateScroll"
        &gt;
          &lt;router-view :key="$route.path" /&gt;
        &lt;/transition&gt;
  
        &lt;transition name="fade"&gt;
          &lt;site-loading v-if="loading" /&gt;
        &lt;/transition&gt;
  
        &lt;footer-main /&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import SiteLoading from '@/components/utility/SiteLoading'
  import HeaderMain from '@/components/utility/HeaderMain'
  import FooterMain from '@/components/utility/FooterMain'
  
  export default {
    components: {
      SiteLoading,
      HeaderMain,
      FooterMain
    },
    data() {
      return {
        site: this.$store.state.site
      }
    },
    computed: {
      loading() {
        return this.$store.state.site.loading
      },
    },
    methods: {
      getLinkEl(el) {
        while (el.parentNode) {
          if (el.tagName === 'A') return el
          el = el.parentNode
        }
      },
      handleClicks (e) {
  
      },
      updateScroll() {
        window.scroll(0,0)
      },
    },
  }
  &lt;/script&gt;
  </code></pre>