Mobile Development w/Vuejs and Ionic Capacitor Plugins
Tags: vue, javascript, ionic, tutorial
Published: 2020-01-09 19:39:16

*Photo by israel palacio on Unsplash*



### Overview
This sample/tutorial will walk through the integration of the following features in an [Ionic Capacitor](https://capacitor.ionicframework.com/) web/mobile application using Vuejs.

- Using VueJS for basic application with Ionic Components
- Using the [Capacitor Geolocation Plugin](https://capacitor.ionicframework.com/docs/apis/geolocation/) in mobile application and in PWA
- Using the [Capacitor Camera Plugin](https://capacitor.ionicframework.com/docs/apis/camera) in mobile application and in PWA
- Using the [Cordova Barcode Scanner Plugin](https://github.com/phonegap/phonegap-plugin-barcodescanner) 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.
```javascript
import {  
  Plugins,  
  CameraSource,  
  CameraResultType
} from "@capacitor/core";
const { Camera } = Plugins;
```
Now to call the methods on the Camera
```javascript
const image = await Camera.getPhoto({
  quality: 90,            
  allowEditing: true,            
  resultType: CameraResultType.DataUrl,            
  source: CameraSource.Prompt
});
```
And for Geolocation
```javascript
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
```javascript
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.

<p align="center">
<img src="https://raw.githubusercontent.com/aaronksaunders/capacitor-vue-ionicv4-app/master/Screen%20Shot%202019-05-25%20at%204.57.18%20PM.png" width='40%'>
<img src="https://raw.githubusercontent.com/aaronksaunders/capacitor-vue-ionicv4-app/master/Screen%20Shot%202019-05-25%20at%204.49.02%20PM.png" width='40%'>
  </p>

  
### Adding A Non Capacitor Plugin
I am testing with the [Barcode Scanner Plugin](https://github.com/phonegap/phonegap-plugin-barcodescanner), 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.
```javascript
window.cordova.plugins.barcodeScanner.scan(
  function(result) { /* success */ },
  function(error) { /* error */ },
  { /* settings */ }
  );
```


{%github aaronksaunders/capacitor-vue-ionicv4-app %}

### Video Playlist On Vue and Vue Composition API
{% youtube 3MLHCRep_MM %}

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