Using Ionic Capacitor Plugins In A VueJS Vite Mobile Application
Tags: ionic, vue, javascript, mobile
Published: 2023-03-09 22:50:12


> [**All Videos Related to This Series**](https://www.youtube.com/playlist?list=PL2PY2-9rsgl1qJS3CBrbJxmbLBDBa2E1x)

In the blog post linked above, we talked about creating mobile applications with [Vue](https://vuejs.org/), [Vite](https://vitejs.dev/), and [Ionic Capacitor](https://capacitorjs.com/). 

In this video, we'll be using [Capacitor Camera](https://capacitorjs.com/docs/next/apis/camera) and [Capacitor Action Sheet](https://capacitorjs.com/docs/next/apis/action-sheet) Plugins to improve the user experience without relying on the Ionic Framework. By using the PWA Elements version of these plugins, they can be used for PWAs running on a browser or device.

{% embed https://www.loom.com/share/675e8775ed8c41e391d51ebd6e6f8def?hide_title=true  %}

## Setting up Required Libraries
First install the plugins
```
npm install @capacitor/camera
npm install @capacitor/action-sheet
```

Then sync the changes with capacitor
```
npx cap sync
```

Next we need to install the PWA Elements which provide a web based user experience when the app is not running on a mobile device, more information in the PWA Elements can be found here in the [capacitor documentation](https://capacitorjs.com/docs/web/pwa-elements)
```
npm install @ionic/pwa-elements
```

## Modifying the Project Code
the element loader needs to me loaded after the main app component is mounted. 

Add the following code to the `main.ts`

```js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import { defineCustomElements } from '@ionic/pwa-elements/loader';

createApp(App).mount('#app')

// Call the element loader after the app has been rendered the first time
defineCustomElements(window);
```

### Action Sheet
Lets start with the Action Sheet, modify the code in the `script setup` section of `App.vue`. This code is copied directly from the Capacitor documentation referenced above

```js
<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";

// New Import for ActionSheet Plugin
import { ActionSheet, ActionSheetButtonStyle } from "@capacitor/action-sheet";

// New function to render the ActionSheet
const showActionSheet = async () => {
  const result = await ActionSheet.showActions({
    title: "Photo Options",
    message: "Select an option to perform",
    options: [
      {
        title: "Upload",
      },
      {
        title: "Share",
      },
      {
        title: "Remove",
        style: ActionSheetButtonStyle.Destructive,
      },
    ],
  });

  console.log("Action Sheet result:", result);
};
</script>
```
Finally we have the template which needs a button to trigger the event to call the function `showActionSheet`.

```vuejs
<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue + Ionic Capacitor" />
  <button @click="showActionSheet">SHOW ACTION SHEET</button>
</template>
```

### Camera
Since we already installed the plugins, lets jump straight into the code.

Inside of `App.vue` script section we will add the required imports
```js
import { Camera, CameraResultType } from '@capacitor/camera';
import { ref } from "vue";
```
and a new function to take a picture.

```js
// ref for image from camera
const imageUrl = ref<string|undefined>()

// camera
const takePicture = async () => {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: CameraResultType.Uri
  });

  imageUrl.value = image.webPath;
};
```
in the template, lets add the button to trigger the event to call the new function to create a photo, and an HTML image element to hold the image from the camera
```vue
<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue + Ionic Capacitor" />
  <button @click="showActionSheet" class="action-button">SHOW ACTION SHEET</button>
  <button @click="takePicture"  class="action-button">TAKE PICTURE</button>
  <img :src="imageUrl" style="width: 100%"/>
</template>
```


### More...
See the whole list of Ionic Capacitor Plugins [here](https://capacitorjs.com/docs/plugins), and you can get additional information on the Ionic PWA Plugins [here](https://ionic.io/pwa)

More Web and Mobile Development Content available on my Youtube Channel - {% embed https://www.youtube.com/channel/UCMCcqbJpyL3LAv3PJeYz2bg/ %}