Getting Started with Mobile Development with Ionic and Vue
Tags: vue, android, javascript, codenewbie
Published: 2020-10-13 20:09:22

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

### 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` :

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