Preload page in NuxtJS

user_6134029 0
Viewed 868

I have a NuxtJS static site containing static text, 1 PNG image (served from the local assets folder) and the vue-particles plugin.

Every time I visit this page, the page gets loaded in the following order:

  1. The HTML loads
  2. The PNG image loads progressively.
  3. The vue-particles plugin loads 2 seconds later.

What is the best way to show a loading indictor until the complete page is loaded? For the loading indicator, I'm thinking about a fullscreen CSS overlay div.

nuxt.js vue.js
1 Answers
//  1. Turn your loader ON at first
data() {
  loading: true,
},

// 2. Listen on `mounted` `hook` on `vue-particles` and turn OFF your loader:
<vue-particles @hook:mounted="loading = false"></vue-particles>
user_75536930
Related