DEV Community

Ionic profile image Aaron K Saunders
Aaron K Saunders for Ionic

Posted on • Edited on

VueJS Ionic Capacitor Sample Application

#vue #javascript #webdev #learning

🔆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




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"
      ]
    }
}
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!

Read next

shafiqbd profile image

Merge Strings Alternately in javascript

Md. Shafiqul Islam -

cloudforce profile image

Effortless Web Hosting: Build and Run an NGINX Server with Docker

Matthew M Tarfa -

evgenyigumnov profile image

Need Advice on Improving My Codebase: Increased Readability and Error Management

Evgeny Igumnov -

mukeshkg profile image

I wanted my users to have their own subdomain and ...

Mukesh KG -