🔆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
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
--
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
Top comments (1)
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!