You've successfully subscribed to developer.school
Great! Next, complete checkout for full access to developer.school
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.
Success! Your billing info is updated.
Billing info update failed.

How to show a Toast in Ionic 5 and Vue

Paul Halliday
Paul Halliday

Toast. Not the food kind. In this article we're going to look at how we can show Toasts (alerts) within Ionic 5. You'd probably want to use a Toast to display a none-critical message to the user for three to six seconds.

By understanding the key actions your user will take within your application, showing a Toast may be useful in situations that are asynchronous or require extra feedback.

To get started, we'll need to create a new Ionic project using the Vue CLI. If you haven't done that before, I'd recommend that you follow the How to use Ionic 5 with Vue.js post.

Displaying a Toast

Firstly, we'll head over to App.vue and create a method named showToast(), as well as an ion-button that triggers this when clicked.

<template>
  <ion-app>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Toast</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-card>
        <img src="https://images.unsplash.com/photo-1515481774243-98fd57ff2bd4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1552&q=80" />
        <ion-card-header>
          <ion-card-subtitle>Not that kind of </ion-card-subtitle>
          <ion-card-title>Toast</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <ion-button @click="showToast" fill="clear">Show me the Toast!</ion-button>
        </ion-card-content>
      </ion-card>
    </ion-content>
  </ion-app>
</template>

Next up, we'll need to define our showToast method.

export default {
  name: 'app',
  methods: {
    async showToast () {
    const toast = await this.$ionic.toastController.create({
        message: 'Hello, Ionic Vue!',
        duration: 3000
      })

      await toast.present();
    }
  }
}

We're using async and await to resolve the promise returned by this.$ionic.toastController.create. This gives us the ability to customise our Toast with options such as: message, duration, color, position and much more.

Click here to see the full property list inside of the Ionic documentation.

As we now have a reference to the toastController, we can use the present method to show the Toast on screen:

1.png

As we've set the duration to be 3000, the Toast will disappear after 3 seconds.

Position

We're not limited to the bottom of the screen either. We can also change where the Toast is displayed using the position option.

const toast = await this.$ionic.toastController.create({
  message: 'Hello, Ionic Vue!',
  //position: 'middle', 'top' or 'bottom'
  duration: 6000
})

As we've seen prior, if we don't specify a position, it'll default to the bottom. Let's take a look at both the middle and top values:

Dismissing a Toast

We can further customise our Toast by showing a close button to allow the user to close the toast:

const toast = await this.$ionic.toastController.create({
  message: 'Hello, Ionic Vue!',
  showCloseButton: true,
  duration: 3000
})

The toast can also be dismissed inside of your code by using toast.dismiss(). Here's an example of dismissing the toast manually after 2 seconds:

async showToast () {
  const toast = await this.$ionic.toastController.create({
    message: 'Hello, Ionic Vue!',
    showCloseButton: true,
  })

  await toast.present();

  setTimeout(() => {
    await toast.dismiss();

  }, 2000)
}

Event data

We can capture information about the dismissal using the onDidDismiss or onWillDismiss methods:

async showToast () {
  const toast = await this.$ionic.toastController.create({
    message: 'Hello, Ionic Vue!',
    showCloseButton: true,
    duration: 2000
  })

  await toast.present();

  const { role } = await toast.onDidDismiss()

  switch(role) {
    case "cancel":
      console.log(`User cancelled.`);
    break;
    case "timeout":
      console.log(`Timeout.`)
      break;
  }
}

In this scenario, if the user clicks the Close button we'll see User cancelled. Otherwise, if they click nothing and let the Toast disappear naturally, we'll seeTimeout. in the console.

Summary

I hope this article has helped you understand how to use Toasts inside of Ionic 5 and Vue. I'd love to hear your feedback in the comments below!

Ionic

Paul Halliday

👋 Want to see more content? Head over to the YouTube channel: https://youtube.com/c/paulhalliday!