Mobile Development with Ionic and Vue — Loading Indicators

Photo by DDP on Unsplash

If we know how to create Vue web apps but want to develop mobile apps, we can use the Ionic framework.

In this article, we’ll look at how to get started with mobile development with the Ionic framework with Vue.

Loading Indicator

We can add a loading indicator with Ionic Vue with the ion-loading component.

For example, we can write:

<template>
  <ion-button @click="presentLoading">Show Loading</ion-button>
</template>
<script>
import { IonButton, loadingController } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
  props: {
    timeout: { type: Number, default: 1000 },
  },
  methods: {
    async presentLoading() {
      const loading = await loadingController
        .create({
          cssClass: 'my-custom-class',
          message: 'Please wait...',
          duration: this.timeout,
        });
        await loading.present();
        setTimeout(function() {
        loading.dismiss()
      }, this.timeout);
    }
  },
  components: { IonButton }
});
</script>

to use it.