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.