Create a loading page in Vue 2 and 3

In this post I am going to teach you how to configure a simple loading for your application like the one you can see in the following video:

Creating a loading for our page is basic in any application that does NOT have static content and we need to show it when we launch a process that will take some time.

For this we are going to make use of a package that we can install through Node:

https://www.npmjs.com/package/vue-loading-overlay

We could use an SVG, Gif or a video as a resource, adapt it with CSS and show/hide it according to some need through some boolean property, but to make it more interesting we are going to use the previous package that once installed, we can make use of the component:

       <loading
           v-model:active="isLoading"
           :can-cancel="false"
           :is-full-page=true
       />

Working with loading

Which defines the following components:

1. v-model:active Which receives a boolean indicating whether or not it is visible.
2. :can-cancel that indicates whether or not the user will be able to cancel the loading.
3. :is-full-page That indicates if we show it in full screen mode or not.

So, with this, we adapt the following script that is part of my Electron course, in which through the isLoading model we show the Loading as soon as the page loads, since the load we do from Firebase (Internet) we do it initially just load the component; then, once the data is loaded we hide it:

this.groups = await getGroups()
this.isLoading=false

Otherwise, we load the component before using and we're done:

import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';
Codigo completo
<template>
   <div>
       <loading
           v-model:active="isLoading"
           :can-cancel="false"
           :is-full-page=true
       />
       <h1>Grupos</h1>
       <div class="list-group list-group-flush">
           <router-link class="list-group-item list-group-item-action" v-for="g in groups" v-bind:key="g" :to="{ name:'Chat', params:{ room: g.id } }">
               {{ g.description }}
           </router-link>
       </div>
   </div>
</template>
<script>
import { getGroups } from "../helpers/fchat"
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';
export default {
   components:{
       Loading
   },
   mounted: async function(){
       this.groups = await getGroups()
       this.isLoading=false
       /*this.groups.then((res)=> {
           console.log(res)
       })*/
   },
   data() {
       return {
           groups:[],
           isLoading:true
       }
   },
}
</script>

In the code above, you can see that we make a request just when we mount the synchronous type application, the loading is shown by default according to the initialization we did, once the data is loaded, we remove the loading.

16-08-2023 - Andrés Cruz

En español

• Category
• /
• Vue
• /
• Create a loading page in Vue 2 and 3