CODEWITHSUNDEEP
javascriptvue.jsvue-componentvue-router
Ahmed Hossam
Ahmed Hossam

Reputation: 87

Vue.js: How to show loading statement instead of white page before application loads

When a new Vue.js page is opened, a white page appears for a while until the whole application loads. I tried many times to put the loading statement first with the traditional way, but the problem is that even the loading statement needs a while to load and appear, to replace the white page.

<div id="app">
    <template>
  <div id="app">
    <v-app>
      <navbar></navbar>

      <v-content class="mx-sm-12 mt-8 mx-1">
        <router-view />
      </v-content>
    </v-app>
  </div>
</template>

<script>
import navbar from "./components/navbar";

export default {
  components: {
    navbar
  }
}
</script>

Upvotes: 6

Views: 16367

Answers (2)

Chop TRAN
Chop TRAN

Reputation: 529

Your html will be downloaded and render first. you should have your loading in the index.html.

After the JS (Vue built file) downloaded it will replace the <div id="app"></div> in your index.html.

I solved this loading by having my index.html like this:

<html>
<head>
   ...
</head>
<body>
<div id="app">
    <div id="loading__container">
       <div>some animation and text to indicate loading...</div>
    </div>
</div>
<style>
#loading__container {
    // animation style
}
</style>
<script type='text/javascript'>
    var loading = document. getElementById("loading__container")
    // ... do things with the loading container
</script>
</body>
</html>

Upvotes: 16

Julfiker
Julfiker

Reputation: 308

HTML

<div id="app" v-cloak></div>

CSS: Add following style into the CSS file

[v-cloak] > * { display:none } [v-cloak]::before { content: "Loading…" }

You can use animated gif instead of 'loading' text.

Upvotes: 12

Related Questions