Mobile Development with Ionic and Vue — Toggle, Toolbar, and Header

Photo by Jeffrey F Lin 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.

Toggle Switches

We can add toggle switches with the ion-toggle component.

For example, we can add switches with various colors:

<template>
  <div>
    <ion-toggle color="primary"></ion-toggle>
    <ion-toggle color="secondary"></ion-toggle>
    <ion-toggle color="danger"></ion-toggle>
    <ion-toggle color="light"></ion-toggle>
    <ion-toggle color="dark"></ion-toggle>
  </div>
</template>
<script>
import { IonLabel, IonList, IonItem, IonToggle } from "@ionic/vue";
import { defineComponent, ref, vue } from "vue";
export default defineComponent({
  components: { IonLabel, IonList, IonItem, IonToggle }
});
</script>

Also, we can write:

<template>
  <ion-item>
    <ion-label>Mushrooms</ion-label>
    <ion-toggle
      @ionChange="checked.value = !checked.value"
      value="mushrooms"
      :checked="checked"
    >
    </ion-toggle>
  </ion-item>
</template>
<script>
import { IonLabel…