VueJS Ionic Capacitor Sample Application
Tags: vue, javascript, webdev, learning
Published: 2019-10-08 00:07:08

---
title: VueJS Ionic Capacitor Sample Application
published: true
description: using capacitor ionic and vuejs with camera plugin
tags: #vue #javascript #webdev #learning
---

####[🔆Click Here for Ionic Framework ReactJS and VueJS Tips/Tutorials?🔆](https://buff.ly/35bAMIf) 

# VueJS Ionic Capacitor Sample Application

- Using VueJS for basic application
- Geolocation Plugin
- Camera Plugin
- Live Reload Is Enabled by default in application

### Overview
This is a basic two page application based on the default settings of creating a vue-cli based application. We have made some adjustments to the application to support the inclusion of the awesome [Ionic Framework v4 Web Components](https://ionicframework.com/docs/components)

### 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 my vue project and made 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 

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

### Source Code for Project
{%github aaronksaunders/capacitor-vue-ionicv4-app %}

### Important - Live Reload
For this project to work, I am running the vue application on local server and the ios project is loading the application from there.

```json
{
  "appId": "com.aks.vuehw",
  "appName": "vuehw",
  "bundledWebRuntime": false,
  "webDir": "dist",
    "server": {
      "url": "http://localhost:8080", // THIS LINE IN capacitor.config is making it happen
      "allowNavigation": [
        "example.org",
        "*.example.org",
        "192.0.2.1",
        "mapbox.com"
      ]
    }
}
```
This requires you to run the vue server locally using the following command
```
npm run serve
```
And the start the ios project using the capacitor commands
```
npx cap sync; npx cap open ios
```

### Turning Off Live Reload
Just remove the whole `server.url` section from the `capacitor.config.json` file
```json
{
  "appId": "com.aks.vuehw",
  "appName": "vuehw",
  "bundledWebRuntime": false,
  "webDir": "dist",
    "server": {
      "url": "http://localhost:8080", // REMOVE THIS LINE TO TURN OFF LIVE RELOAD  
      "allowNavigation": [
        "example.org",
        "*.example.org",
        "192.0.2.1",
        "mapbox.com"
      ]
    }
}
```

### Default Project setup for running application with [vue-cli](https://cli.vuejs.org/)
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Run your tests
```
npm run test
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).