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 -
Aaron Saunders - YouTube
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
Top comments (0)