loading...
Ionic

VueJS Ionic Capacitor Sample Application

aaronksaunders profile image Aaron K Saunders Updated on ・2 min read

🔆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

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

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

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

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

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.

Posted on by:

aaronksaunders profile

Aaron K Saunders

@aaronksaunders

See more, like and subscribe 👉🏾 ‪Aaron Saunders 📺 https://www.youtube.com/aaronsaundersci?sub_confirmation=1

Ionic

The open source UI toolkit for developing high-quality cross-platform apps for native iOS, Android, and the web — all from a single codebase.

Discussion

pic
Editor guide
 

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!