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
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 */ }
);
aaronksaunders
/
capacitor-vue-ionicv4-app
sample app using capacitor vuejs and ionicv4 components
VueJS Ionic Capacitor Sample Application
Last Updated 9/5/2020
Youtube VueJS Playlist - https://youtube.com/playlist?list=PL2PY2-9rsgl2bgNTX9omlDisiWh1NYInz
New UPDATED VueJS Ionic Capacitor Sample - Vue3 Ionic BETA - https://github.com/aaronksaunders/capacitor-vue3-ionicv5-app
--
Top comments (3)
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?
Will take a look at updating the blog post? Do you have a skeleton of a small test app to start from
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.