DEV Community

Aaron K Saunders for Ionic

Posted on • Updated on

VueJS Ionic Capacitor Sample Application

๐Ÿ”†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
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

and then the magic happened

Source Code for Project

GitHub logo aaronksaunders / capacitor-vue-ionicv4-app

sample app using capacitor vuejs and ionicv4 components

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"
      ]
    }
}
Enter fullscreen mode Exit fullscreen mode

This requires you to run the vue server locally using the following command

npm run serve
Enter fullscreen mode Exit fullscreen mode

And the start the ios project using the capacitor commands

npx cap sync; npx cap open ios
Enter fullscreen mode Exit fullscreen mode

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"
      ]
    }
}
Enter fullscreen mode Exit fullscreen mode

Default Project setup for running application with vue-cli

npm install
Enter fullscreen mode Exit fullscreen mode

Compiles and hot-reloads for development

npm run serve
Enter fullscreen mode Exit fullscreen mode

Compiles and minifies for production

npm run build
Enter fullscreen mode Exit fullscreen mode

Run your tests

npm run test
Enter fullscreen mode Exit fullscreen mode

Lints and fixes files

npm run lint
Enter fullscreen mode Exit fullscreen mode

Customize configuration

See Configuration Reference.

Top comments (1)

Collapse
 
robinhoeh profile image
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!