Mobile Development with Ionic and Vue — Segment Display, Dropdowns, and Toasts

Photo by Jessica Lewis on Unsplash

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.

Segment Display

We can use the ion-segment component to add a segment display.

For example, we can write:

<template>
  <ion-segment @ionChange="segmentChanged($event)">
    <ion-segment-button value="friends">
      <ion-label>Friends</ion-label>
    </ion-segment-button>
    <ion-segment-button value="enemies">
      <ion-label>Enemies</ion-label>
    </ion-segment-button>
  </ion-segment>
</template>
<script lang="ts">
import { IonSegment, IonSegmentButton, IonToolbar } from "@ionic/vue";
import { defineComponent } from "vue";
export default defineComponent({
  components: { IonSegment, IonSegmentButton, IonToolbar },
  methods: {
    segmentChanged(ev: CustomEvent) {
      console.log("Segment changed", ev);
    },
  },
});
</script>

We add the ion-segment component to add the segment.

The ionChange event is emitted when we click on the segment.