How to show a Toast in Ionic 4 and Vue

Toast. Not the food kind. In this article we’re going to look at how we can show Toasts (alerts) within Ionic 4. 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 4 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.

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

Show me the Toast!

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:

Toast, everywhere.

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 4 and Vue. I’d love to hear your feedback in the comments below, and as always, if you’d like to support the free content - buy the Learn Ionic 4 From Scratch book in early access!