Hybrid Vue.js app in Cordova : desktop or mobile ?


If you are developing an hybrid Cordova app that shares the same code in its desktop and mobile version, here is a little hack to know if the code is executed in Cordova.

Files in Cordova apps are served over file://, whereas website are served over http:// or https://.

You can access the current protocol using window.location.protocol. Here is a code snippet to test it :

import Vue from 'vue'
Vue.isCordova = window.location.protocol.match(/^file/)

Vue.extend(
  created () {
    if (this.isCordova) {
      // Yes this is the Cordova version of your app
    } else {
      // This is the desktop version
    }
  }
)

Note : Electron apps are also served via file:// so if your app is also bundled with Electron, isCordova will be true.

  • : Vue.js wrapper for Cordova API and Cordova plugins

Latest posts

Use Vue.js to create custom web components

Include Vue.js components in any HTML/JS application

Use a global event bus instead of a state manager

Emit and listen to events across every Vue components of your app

Vue.js Component Style Guide

General purpose recommandations for writing Vue.js components code

How to use Docker containers for Vue.js applications

Get started with Docker and Vue.js

Hide elements during loading using "v-cloak"

You probably need this directive and didn't know it

Using Bootstrap with Vue.js

Question is : do you really need Boostrap ?

Build, test and deploy your Vue.js app easily with Gitlab

Introduction to Continuous Integration using free Gitlab tools

Another way to declare Vuex modules

`vuex-module` provides a syntax to write your store modules' state, actions, getters, etc. You may want to use it.

Simple state management, simpler than Vuex

Vue Stash makes it easy to share reactive data between components. An alternative to Vuex.

Does Vue.js require jQuery ?

No it doesn't. But you might find it useful, here's why.