Photo by israel palacio on Unsplash

Overview

This sample/tutorial will walk through the integration of the following features in an Ionic Capacitor web/mobile application using Vuejs.

• Using VueJS for basic application with Ionic Components
• Using the Capacitor Geolocation Plugin in mobile application and in PWA
• Using the Capacitor Camera Plugin in mobile application and in PWA
• Using the Cordova Barcode Scanner Plugin in mobile application

Capacitor Camera Plugin Integration 

There are a set of plugins that come as a default with Capacitor, the Camera and Geolocation are in that category. To access those plugins from @capacitor/core node module.

import {  
  Plugins,  
  CameraSource,  
  CameraResultType
} from "@capacitor/core";
const { Camera } = Plugins;

Now to call the methods on the Camera

const image = await Camera.getPhoto({
  quality: 90,            
  allowEditing: true,            
  resultType: CameraResultType.DataUrl,            
  source: CameraSource.Prompt
});

And for Geolocation

let location = await Geolocation.getCurrentPosition({
  enableHighAccuracy: true,        
  timeout: 30000      
});

Get Camera Working In PWA/Website

• see https://capacitor.ionicframework.com/docs/pwa-elements/

Installed PWA Elements

npm install @ionic/pwa-elements

Then opened up the main.js file in the vue project and make the following changes

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

Vue.config.productionTip = false;

Vue.use(Ionic);
new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

defineCustomElements(window);  // <== NEW

and then the magic happened, Ionic will now use the pwa-element to access the web camera instead of looking for the device camera.

Adding A Non Capacitor Plugin

I am testing with the Barcode Scanner Plugin, you will need to install the plugin using npm

npm install phonegap-plugin-barcodescanner

and then in the source code you get access to the plugin off of the window object. In your code, you can also check the window object for cordova to make sure the user doesn't try and load the barcode scanner in the browser.

window.cordova.plugins.barcodeScanner.scan(
  function(result) { /* success */ },
  function(error) { /* error */ },
  { /* settings */ }
  );

Video Playlist On Vue and Vue Composition API

Additional Ionic Framework VueJS Samples

• https://github.com/aaronksaunders/ionic4-vue-tabs
• https://github.com/aaronksaunders/icon-vue
• https://github.com/aaronksaunders/ionic-vue-picker-sample
• https://github.com/aaronksaunders/vue-ionic-demo
• https://github.com/aaronksaunders/capacitor-vue-ionicv4-app