Creating a hybrid app using Cordova while incorporating VueJS for routing and AJAX requests has presented some challenges for me.
Despite my efforts, I have been unable to capture certain Cordova events. Even the essential deviceReady event seems to be eluding me. Below is a snippet of my code:
require('./bootstrap');
var Vue = require('vue');
var VueRouter = require('vue-router');
Vue.use(VueRouter);
// Components
Vue.component('test', require('./Vue/components/test.vue'));
Vue.component('mainnav', require('./Vue/partials/mainnav.vue'));
// Route components
const Home = Vue.component('home', require('./Vue/pages/home.vue'));
const Login = Vue.component('login', require('./Vue/pages/auth/login.vue'));
const Register = Vue.component('register', require('./Vue/pages/auth/register.vue'));
const notFound = Vue.component('notFound', require('./Vue/pages/404.vue'));
// Define routes
const routes = [
{ path: '', component: Home },
{ path: '/', component: Home },
{ path: '/login', component: Login },
{ path: '/register', component: Register },
{ path: '*', component: 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');
I suspect that the issue might arise from the device being ready before Vue is fully active. How can this timing conflict be resolved?
We do have access to other functionalities such as the vibration-plugin through both the Vue root-instance and a specific Vue component:
export default {
data() {
return {
vibrateDuration: 5000,
};
},
methods: {
letsVibrate: function(){
navigator.vibrate(this.vibrateDuration);
}
}
}
Any suggestions on how to effectively capture the device ready event within the Vue framework?