DEV Community

Cover image for Mobile Development w/Vuejs and Ionic Capacitor Plugins
Aaron K Saunders
Aaron K Saunders

Posted on

Mobile Development w/Vuejs and Ionic Capacitor Plugins

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.

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;
Enter fullscreen mode Exit fullscreen mode

Now to call the methods on the Camera

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

And for Geolocation

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

Get Camera Working In PWA/Website

Installed PWA Elements

npm install @ionic/pwa-elements
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 */ }
  );
Enter fullscreen mode Exit fullscreen mode

GitHub logo aaronksaunders / capacitor-vue-ionicv4-app

sample app using capacitor vuejs and ionicv4 components

Video Playlist On Vue and Vue Composition API

Additional Ionic Framework VueJS Samples

Top comments (3)

Collapse
 
firesol profile image
Fire Sol Dev

Hi Aaron, hope you are well in this crazy year we find ourselves in.

I am really trying to get Cordova barcode scanning functionality to work in Vue 3, with no luck. Might there be any chance of an updated example for Vue 3?

Collapse
 
aaronksaunders profile image
Aaron K Saunders

Will take a look at updating the blog post? Do you have a skeleton of a small test app to start from

Collapse
 
firesol profile image
Fire Sol Dev • Edited

Hi Aaron, I don't have a skeleton app, was just using the ionic-vue photo gallery example that is available on the Ionic Documentation and then added your Geolocation code. Tried to get scanner working with Ionic-Vue but kept on bombing out.

I am very much a novice when it comes to coding and have been trying unsuccessfully to get the cordova barcode scanner working. I managed with Ionic Angular but am more interested in using Vue as I prefer it as a framework but the newer version involves a different setup.