🔆Click Here for Ionic Framework ReactJS and VueJS Tips/Tutorials?🔆

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

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

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

Source Code for Project

aaronksaunders / capacitor-vue-ionicv4-app

sample app using capacitor vuejs and ionicv4 components

VueJS Ionic Capacitor Sample Application

updated 9/5/2020 -- New UPDATED VueJS Ionic Capacitor Sample - Vue3 Ionic BETA - https://github.com/aaronksaunders/capacitor-vue3-ionicv5-app --

Ionic
   Ionic CLI       : 6.6.0 (/Users/aaronksaunders/.nvm/versions/node/v13.5.0/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 0.0.9
Capacitor
   Capacitor CLI   : 2.0.2
   @capacitor/core : 2.0.2

Utility:

   cordova-res (update available: 0.14.0) : 0.11.0
   native-run                             : 1.0.0

System:

   NodeJS : v13.5.0 (/Users/aaronksaunders/.nvm/versions/node/v13.5.0/bin/node)
   npm    : 6.14.1
   OS     : macOS Catalina

---

Click To View Ionic VueJS Video Playlist

---

Other Ionic Vue 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

Sample Overview

• Using VueJS for basic application
• Capacitor Geolocation Plugin
• Capacitor Camera Plugin
• Cordova Barcode Scanner Plugin
• Live Reload Is Enabled

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

import { defineCustomElements } from '@ionic/pwa-elements/loader'; // <== NEW
Vue.config.productionTip = false;

Vue.use(Ionic

…

View on GitHub

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.

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

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

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.

Comments

[robinwatson]

Thanks for this man! One thing that i changed after some issues for live reload was this:

{
"appId": "com.company.app",
"appName": "capacitor-platform-2",
"bundledWebRuntime": false,
"npmClient": "npm",
"webDir": "dist",
"cordova": {},
"server": {
"url":"http://192.168.0.111:8080"
}
}

I followed the same commands you have, serve, copy, open.

Thanks!