Mobile Development with Ionic and Vue — Action Sheets and Alerts
Tags: vue, android, webdev, programming
Published: 2021-01-23 02:14:24

**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.

### Action Sheet

We can display an action sheet with Ionic and Vue.

To do that, we can write:

```
<template>
  <ion-page>
    <ion-content>
      <ion-button @click="presentActionSheet">Show Action Sheet</ion-button>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonButton, actionSheetController } from "@ionic/vue";
import { defineComponent } from "vue";
import { caretForwardCircle, close, heart, trash, share } from "ionicons/icons";

export default defineComponent({
  components: { IonButton },
  methods: {
    async presentActionSheet() {
      const actionSheet = await actionSheetController.create({
        header: "Albums",
        cssClass: "my-custom-class",
        buttons: [
          {
            text: "Delete",
            role: "destructive",
            icon: trash,
            handler: () => {
              console.log("Delete clicked");
            },
          },
          {
            text: "Play (open modal)",
            icon: caretForwardCircle,
            handler: () => {
              console.log("Play clicked");
            },
          },
          {
            text: "Cancel",
            icon: close,
            role: "cancel",
            handler: () => {
              console.log("Cancel clicked");
            },
          },
        ],
      });
      return actionSheet.present();
    },
  },
});
</script>
```

We add the `presentActionSheet` method to show the action sheet with `actionSheetController.create` .

The object in the argument has the `header` with the action sheet header.

`cssClass` has the CSS class.

`buttons` has an array of buttons.

The objects in the array lets us set various things for the buttons.

`text` has the button text.

`role` has the aria-role.

`icon` has the icon.

`handler` has the function that’s run when we click on the button.

The `actionSheet.present` method shows the action sheet.

### Alert

We can show alerts with the `alertController` .

For example, we can write:

```
<template>
  <ion-page>
    <ion-content>
      <ion-button @click="presentAlert">Show Alert</ion-button>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonButton, alertController } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonButton },
  methods: {
    async presentAlert() {
      const alert = await alertController.create({
        cssClass: "my-custom-class",
        header: "Alert",
        subHeader: "Subtitle",
        message: "This is an alert message.",
        buttons: ["OK"],
      });
      return alert.present();
    },
  },
});
</script>
```

to show the alert.

`alertController.create` creates the alert object.

`cssClass` has the CSS class.

`header` has the header.

`subHeader` has the subheader text.

`message` has the message text.

`buttons` has the button text.

We can customize the buttons more.

For example, we can write:

```
<template>
  <ion-page>
    <ion-content>
      <ion-button [@click](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Fclick "Twitter profile for @click")="presentAlert">Show Alert</ion-button>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonButton, alertController } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonButton },
  methods: {
    async presentAlert() {
      const alert = await alertController.create({
        cssClass: "my-custom-class",
        header: "Alert",
        subHeader: "Subtitle",
        message: "This is an alert message.",
        buttons: [
          {
            text: "Cancel",
            role: "cancel",
            cssClass: "secondary",
            handler: (blah) => {
              console.log("Confirm Cancel:", blah);
            },
          },
          {
            text: "Okay",
            handler: () => {
              console.log("Confirm Okay");
            },
          },
        ],
      });
      return alert.present();
    },
  },
});
</script>
```

We add the `buttons` array and objects in the array.

The `text` has the button text.

`role` has aria-role.

`cssClass` has the CSS class.

`handler` has the function that’s run when we click the button.

### Conclusion

We can add action sheets and alerts with Ionic Vue.