I am trying to build a hybrid-app with Cordova. I am using VueJS for routing and AJAX requests.

Unfortunately I am not able to catch some of the Cordova events. Not even the deviceReady event is working.
Here is my file:

require('./bootstrap');


var Vue = require('vue');
var VueRouter = require('vue-router');

Vue.use(VueRouter);

// Some ponents
Vueponent('test', require('./Vue/ponents/test.vue'));
Vueponent('mainnav', require('./Vue/partials/mainnav.vue'));

// Route-ponents
const Home = Vueponent('home', require('./Vue/pages/home.vue'));
const Login = Vueponent('login', require('./Vue/pages/auth/login.vue'));
const Register = Vueponent('register', require('./Vue/pages/auth/register.vue'));
const notFound = Vueponent('notFound', require('./Vue/pages/404.vue'));

// the routes
const routes = [
    { path: '', ponent: Home },
    { path: '/', ponent: Home },
    { path: '/login', ponent: Login },
    { path: '/register', ponent: Register },
    { path: '*', ponent: notFound }
];

const router = new VueRouter({
    mode: 'history',
    routes // short for routes: routes
});

const vueApp = new Vue({
    router,
    mounted: function(){
        //alert('VueJS is ready!');
        document.addEventListener('deviceReady', this.onDeviceReady, false);
    },
    methods: {
        onDeviceReady: function() {
            alert('Device is ready!');
        }
    }
}).$mount('#app');

Maybe I don't get a message because the device is ready before Vue is ready. But how can I handle this?

I have access to to other options, for example the vibration-plugin both from the Vue root-instance and from a vue ponent:

export default {
    data() {
        return {
            vibrateDuration: 5000,
        };
    },
    methods: {
        letsVibrate: function(){
            navigator.vibrate(this.vibrateDuration);
        }
    }
}

Any idea, how I can catch the device ready event within Vue?

I am trying to build a hybrid-app with Cordova. I am using VueJS for routing and AJAX requests.

Unfortunately I am not able to catch some of the Cordova events. Not even the deviceReady event is working.
Here is my file:

require('./bootstrap');


var Vue = require('vue');
var VueRouter = require('vue-router');

Vue.use(VueRouter);

// Some ponents
Vue.ponent('test', require('./Vue/ponents/test.vue'));
Vue.ponent('mainnav', require('./Vue/partials/mainnav.vue'));

// Route-ponents
const Home = Vue.ponent('home', require('./Vue/pages/home.vue'));
const Login = Vue.ponent('login', require('./Vue/pages/auth/login.vue'));
const Register = Vue.ponent('register', require('./Vue/pages/auth/register.vue'));
const notFound = Vue.ponent('notFound', require('./Vue/pages/404.vue'));

// the routes
const routes = [
    { path: '', ponent: Home },
    { path: '/', ponent: Home },
    { path: '/login', ponent: Login },
    { path: '/register', ponent: Register },
    { path: '*', ponent: notFound }
];

const router = new VueRouter({
    mode: 'history',
    routes // short for routes: routes
});

const vueApp = new Vue({
    router,
    mounted: function(){
        //alert('VueJS is ready!');
        document.addEventListener('deviceReady', this.onDeviceReady, false);
    },
    methods: {
        onDeviceReady: function() {
            alert('Device is ready!');
        }
    }
}).$mount('#app');

Maybe I don't get a message because the device is ready before Vue is ready. But how can I handle this?

I have access to to other options, for example the vibration-plugin both from the Vue root-instance and from a vue ponent:

export default {
    data() {
        return {
            vibrateDuration: 5000,
        };
    },
    methods: {
        letsVibrate: function(){
            navigator.vibrate(this.vibrateDuration);
        }
    }
}

Any idea, how I can catch the device ready event within Vue?

• javascript
• cordova
• vue.js

• 1 did you find an answer for this? I am experiencing the same issue... – southpaw93 Commented Aug 28, 2018 at 18:16

3 Answers 3

It maybe is a question of concurrency. Try setting up some simple semaphore locks that trigger a function only when both are on (not tested, but you get the idea):

let deviceReady = false
let vueMounted = false

const vueApp = new Vue({
  router,
  mounted: function(){
    vueMounted = true
    if (deviceReady) vueApp.everythingReady()
  },
  methods: {
    everythingReady: function() {
        alert('Vue is mounted and everything is ready')
    }
  }
}).$mount('#app')

document.addEventListener('deviceReady', () => {
  deviceReady = true
  if (vueMounted) vueApp.everythingReady()
}, false)

For vue apps you must explicity add <script src="cordova.js"></script> to public/index.html

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title>My app</title>
  </head>
  <body>
    <script src="cordova.js"></script> <!-- dude, add this -->
    <div id="app"></div>
    <noscript>
      <strong
        >We're sorry but ia doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong
      >
    </noscript>
  </body>
</html>

Try with:

vueApp = new Vue({ 
   //...
    methods: { 
          onDeviceReady: function() {
               alert('Device is ready!');
            } 
       } 
});

document.addEventListener(
      'deviceready', 
       vueApp.onDeviceReady
);