Mobile Development with Ionic and Vue — Backdrop, Loading Indicator, and Popovers
Tags: webdev, android, vue, javascript
Published: 2021-01-23 02:17:06

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


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.

### Backdrop

We can add a backdrop into our Ionic Vue app with the `ion-backdrop` component.

For example, we can write:

```
<template>
  <ion-backdrop
    :tappable="enableBackdropDismiss"
    :visible="showBackdrop"
    :stop-propagation="shouldPropagate"
  >
  </ion-backdrop>
</template>

<script>
import { IonBackdrop } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonBackdrop },
  setup() {
    return {
      enableBackdropDismiss: true,
      showBackdrop: true,
      shouldPropagate: true,
    };
  },
});
</script>
```

to add the `ion-backdrop` component into our app.

`tappable` makes the backdrop tappable.

`visible` lets us make the backdrop visible.

`stop-propagation` lets us stop the propagation of events if it’s `true` .

### Popovers

We can show popovers by using the `ion-popover` component.

For example, we can write:

`views/Popover.vue`

```
<template>
  <ion-content class="ion-padding">
    Popover Content
  </ion-content>
</template>

<script>
import { IonContent } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Popover',
  components: { IonContent }
});
</script>
```

`views/Home.vue`

```
<template>
  <ion-button @click="setOpen(true, $event)">Show Popover</ion-button>
  <ion-popover
    :is-open="isOpenRef"
    css-class="my-custom-class"
    :event="event"
    :translucent="true"
    @onDidDismiss="setOpen(false)"
  >
    <Popover></Popover>
  </ion-popover>
</template>

<script>
import { IonButton, IonPopover } from '@ionic/vue';
import { defineComponent, ref } from 'vue';
import Popover from './Popover'

export default defineComponent({
  components: { IonButton, IonPopover, Popover },
  setup() {
    const isOpenRef = ref(false);
    const event = ref();
    const setOpen = (state, event) => {
      event.value = event;
      isOpenRef.value = state;
    }
    return { isOpenRef, setOpen, event }
  }
});
</script>
```

The `Popover` component is used for the popover content.

We have a button to show the popover when clicked.

Also, we have the `Popover` displayed when we open the popover.

`is-open` has the open state as the value.

`css-class` has the CSS class for the modal.

`event` has the event object.

`setOpen` sets whether the popover is open by setting the `isOpenRef.value` property to the `state` .

The `state` has the open state.

### Loading Indicator

We can add a loading indicator with the `loadingController` .

To use it, 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: "Loading...",
        duration: this.timeout,
      });

      await loading.present();

      setTimeout(function () {
        loading.dismiss();
      }, this.timeout);
    },
  },
  components: { IonButton },
});
</script>
```

We have the `presentLoading` method that calls the `loadingController.create` method to create the loading indicator object.

`cssClass` has the CSS class.

`message` has the message for the loading indicator.

`duration` has the duration for how long the indicator should show.

`loading.present()` shows the loading indicator.

`loading.dismiss()` closes the loading indicator.

### Conclusion

We can show a backdrop, a popover, and a loading indicator with Ionic Vue.