Author: John Au-Yeung

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.

Badge

We can add a badge with Ionic Vue.

For example, we can use the ion-badge component to add a badge:

<template>
  <ion-page>
    <ion-content>
      <ion-badge color="primary">11</ion-badge>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonBadge, IonItem, IonLabel } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonBadge, IonItem, IonLabel },
});
</script>

We can also put them in an ion-item container:

<template>
  <ion-page>
    <ion-content>
      <ion-item>
        <ion-badge slot="start">11</ion-badge>
        <ion-label>My Item</ion-label>
        <ion-badge slot="end">22</ion-badge>
      </ion-item>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonBadge, IonItem, IonLabel } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonBadge, IonItem, IonLabel },
});
</script>

The slot prop sets the position.

start is left and end is right.

Button

We can add a button with the ion-button component.

For example, we can write:

<template>
  <ion-page>
    <ion-content>
      <ion-button color="secondary">Secondary</ion-button>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonButton } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { IonButton }
});
</script>

to add it.

The color prop has the color of the button.

We can disable it with the disabled prop.

And we can set the size with the size prop. We can set it to default , large , or small .

Ripple Effect

We can add a ripple effect when we click on something with the ion-ripple-effect component.

For example, we can write:

<template>
  <ion-page>
    <ion-content>
      <button class="ion-activatable ripple-parent">
        A button with an unbounded ripple effect
        <ion-ripple-effect type="unbounded"></ion-ripple-effect>
      </button>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonApp, IonContent, IonRippleEffect } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonApp, IonContent, IonRippleEffect },
});
</script>

to add the ripple effect.

Cards

We can add cards with the ion-card component.

For example, we can write:

<template>
  <ion-card>
    <ion-item href="#" class="ion-activated">
      <ion-icon :icon="wifi" slot="start"></ion-icon>
      <ion-label>Card Link Item 1 activated</ion-label>
    </ion-item>

    <ion-item href="#">
      <ion-icon :icon="wine" slot="start"></ion-icon>
      <ion-label>Card Link Item 2</ion-label>
    </ion-item>

    <ion-item class="ion-activated">
      <ion-icon :icon="warning" slot="start"></ion-icon>
      <ion-label>Card Button Item 1 activated</ion-label>
    </ion-item>
  </ion-card>
</template>

<script>
import {
  IonCard,
  IonCardContent,
  IonCardSubtitle,
  IonCardTitle,
  IonIcon,
  IonItem,
  IonLabel,
} from "@ionic/vue";
import { pin, walk, warning, wifi, wine } from "ionicons/icons";
import { defineComponent } from "vue";

export default defineComponent({
  components: {
    IonCard,
    IonCardContent,
    IonCardSubtitle,
    IonCardTitle,
    IonIcon,
    IonItem,
    IonLabel,
  },
  setup() {
    return { pin, walk, warning, wifi, wine };
  },
});
</script>

to add the card with the items.

ion-card is the container for the card.

ion-icon has the icon.

ion-label has the label.

We can also use the ion-card-content component to add the card content:

<template>
  <ion-card>
    <ion-card-header>
      <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
      <ion-card-title>Card Title</ion-card-title>
    </ion-card-header>

    <ion-card-content>
      Keep close to Nature's heart.
    </ion-card-content>
  </ion-card>
</template>

<script>
import {
  IonCard,
  IonCardContent,
  IonCardSubtitle,
  IonCardTitle,
  IonIcon,
  IonItem,
  IonLabel,
} from "@ionic/vue";
import { pin, walk, warning, wifi, wine } from "ionicons/icons";
import { defineComponent } from "vue";

export default defineComponent({
  components: {
    IonCard,
    IonCardContent,
    IonCardSubtitle,
    IonCardTitle,
    IonIcon,
    IonItem,
    IonLabel,
  },
  setup() {
    return { pin, walk, warning, wifi, wine };
  },
});
</script>

ion-card-title has the card’s title, and ion-card-subtitle has the card’s subtitle.

Conclusion

We can add badges, buttons, and cards with Ionic Vue.

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.

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.

Getting Started

We can get started by installing a few things.

First, we install the Ionic CLI globally by running:

npm install -g @ionic/cli@testing

Next, we can create our Ionic app project by running:

ionic start ionic-vue-app blank --type vue --tag vue-beta

tabs adds tabs to the app.

type set to react means we’ll create a React project

--capacitor means we add Capacitor so we can run and build a native app from our project files.

To run our app with Genymotion and built a native app, we need to do more things.

Next, we add some scripts to our package.json file.

We write:

"ionic:serve": "vue-cli-service serve",
"ionic:build": "vue-cli-service build"

to into the scripts section.

Then, we run:

ionic build

to create the assets folder.

Then we run:

npx cap add android
npx cap sync

to add the Android dependencies.

Then we need to install Android Studio and Genymotion.

After we install Android Studio, we install the Genymotion plugin for Android Studio.

Once we did that, we run:

ionic capacitor run android --livereload --external --address=0.0.0.0

which runs our ionic:serve scripts with Genymotion.

We should see the app in Genymotion and any changes will be loaded automatically.

Creating a Camera App

We can create a camera with Ionic Vue by doing a few simple steps.

To write it, we add the following to views/Home.vue :

<template>
  <ion-page>
    <ion-content>
      <ion-grid>
        <ion-row>
          <ion-col>
            <ion-button @click='takePhoto'>take photo</ion-button>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="6" :key="photo" v-for="photo in photos">
            <ion-img :src="photo.webviewPath"></ion-img>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import {
  IonContent,
  IonHeader,
  IonPage,
  IonGrid,
  IonRow,
  IonCol,
  IonImg,
  IonButton
} from "@ionic/vue";
import { defineComponent } from "vue";
import { ref, onMounted, watch } from "vue";
import {
  Plugins,
  CameraResultType,
  CameraSource,
  CameraPhoto,
  Capacitor,
  FilesystemDirectory,
} from "@capacitor/core";

interface Photo {
  filepath: string;
  webviewPath?: string;
}

function usePhotoGallery() {
  const { Camera } = Plugins;
  const photos = ref<Photo[]>([]);
  const takePhoto = async () => {
    const cameraPhoto = await Camera.getPhoto({
      resultType: CameraResultType.Uri,
      source: CameraSource.Camera,
      quality: 100,
    });
    const fileName = new Date().getTime() + ".jpeg";
    const savedFileImage = {
      filepath: fileName,
      webviewPath: cameraPhoto.webPath,
    };
    photos.value = [savedFileImage, ...photos.value];
  };

  return {
    photos,
    takePhoto,
  };
}

export default defineComponent({
  name: "Home",
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonGrid,
    IonRow,
    IonCol,
    IonImg,
    IonButton
  },
  setup() {
    const { photos, takePhoto } = usePhotoGallery();
    return {
      takePhoto,
      photos,
      close,
    };
  },
});
</script>

We add the usePhotoGallery function that gets the camera.

Then we call Camera.getPhoto method to get the camera.

We get the CameraResuultType.Uri property to get the resule type for the camera.

quality has the quality to for the photos.

Then we set the photos.value propety with the new image adter taking the image with the camera, which is stored in the photo.value property.

Then we loop through the photos object to loop through the photos that are taken.

Conclusion

We can create mobile apps easily with Ionic and Vue.