Normally when building Cordova apps, I either use no JavaScript framework at all, or I use Angular with Ionic. But as you can tell by my recent posts, I've become infactuated with Vue.js lately. While the Ionic folks are working on making it easy to use Vue instead of Angular, I thought I'd demonstrate a quick example of how simple it is to use Vue with Cordova. I'm not going to worry about UI for this post, but rather show how to wait for the deviceready event in your Vue app.
As a reminder, the deviceready event is critical in Cordova applications. If you attempt to do anything "special" with the device via plugins before this event is fired, you'll get an error. Therefore most apps simply wait to do anything until that event has fired.
I create a new Cordova project and then removed most of the code to start off a bit simpler. I modified the HTML to include a local copy of Vue (because my app could start offline) and then added a simple variable, status, to my display.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Vue App</title>
</head>
<body>
<div id="app">
App status: {{ status }}
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
My plan here is to simply set status to true when deviceready has fired. Now let's look at the JavaScript.
const app = new Vue({
el:'#app',
data:{
status:false
},
methods:{
init:function() {
this.status = true;
}
}
})
document.addEventListener('deviceready', app.init);
I've got a Vue instnace on top where I default that status value to false. I added an init method that I then simply use as my listener for the deviceready event. I normally think of my Vue methods as being helpers for stuff inside my app, but you can also call them from outside the app by using the instance. In this case it's a great way to "turn on" the app and do stuff after my deviceready event has fired.
Here's an overly large example of this running in the Android emulator:
Trivial, right? So for a more 'real' example, I added the Dialogs plugin and then modified my code a bit. First I added a button to the view:
<div id="app">
<button @click="showDialog" :disabled="!ready">Show Dialog</button>
</div>
Note I've got two Vue related things going on. First, the button is disabled while a value, ready, is false. Secondly, I added a click handler to run a method called showDialog. Let's look at the JavaScript now.
const app = new Vue({
el:'#app',
data:{
ready:false
},
methods:{
init:function() {
this.ready = true;
},
showDialog:function() {
navigator.notification.alert(
'Vue and Cordova is like peanut butter and chocolate!',null,'Vue+Cordova','Done'
);
}
}
})
document.addEventListener('deviceready', app.init);
This is virtually the same as before. I've renamed the variable I use to track the 'ready' status and I added showDialog. This just uses the alert method from the Dialogs pugin.
All in all - nothing special I guess, but simple is good. One big thing to keep in mind is that - normally - you always want to use a Single Page Application (SPA) for your Cordova apps. If your app has any kind of navigation, or view changes, you'll want to use the Vue Router. I wrote up an example of that here that you might find useful. If you're using Vue with Cordova, please let me know in a comment below. Also, if you want an early look at Vue and Ionic, check out this video by Paul Halliday.