Using Ionic Capacitor Plugins In A VueJS Vite Mobile Application

All Videos Related to This Series

In the blog post linked above, we talked about creating mobile applications with Vue, Vite, and Ionic Capacitor.

In this video, we'll be using Capacitor Camera and Capacitor 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.

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

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

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

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

<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

import { Camera, CameraResultType } from '@capacitor/camera';
import { ref } from "vue";

and a new function to take a picture.

// 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

<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, and you can get additional information on the Ionic PWA Plugins here

More Web and Mobile Development Content available on my Youtube Channel -

This is a channel for development videos on Ionic Framework mobile and web application topics including React, Vue, #javascript #react #vuejs #ionicframework #ionic #vue #reactjs #vuejs #reactnative -- Newsletter​ https://buff.ly/3lAk2jL -- Company website - www.clearlyinnovative.com -- GitHub Projects - https://github.com/aaronksaunders -- Blogs - https://dev.to/aaronksaunders -- Udemy Courses - https://www.udemy.com/course/using-ionic-framework-vuejs-firebase-vuex-for-image-diary/?referralCode=4E0B017049999378880A -- Gumrod Ebook - https://gumroad.com/fiwic #kickbackandcode #thefutureiswrittenincode

youtube.com