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.
Archived Comments
If you like Cordova and Vue you can get started quickly with 3 ready made templates that combine Cordova+Vue+Framework7:
https://github.com/phonegap...
https://github.com/phonegap...
https://github.com/phonegap...
I’m on my phone so I can’t test - but when you run that locally via npm - does the code handle faking the deviceready event?
So looking at the first template, I don't see any use of a deviceready event listener. Is that right?
Correct. More and more plugins are starting to sunset. The templates don't even have any plugins by default that need it.
It's really an exercise for the user... It *would* be good to have at last an example of its use, probably. I'll look into it.
No deviceready shim in the templates. I believe there is one in the browser platform... so you could have that functionality in that way.
You should totally raise some issues if you find anything you think would be good to have in there... I'd be happy to add them in.
I have to say... even with plugins beginning to sunset... this feels a bit premature. Are most Cordova folks now skipping deviceready? It seems like it would still be required. I mean shoot - if I can't use the web by itself and I have to use Cordova, it seems like it's going to be because I need a plugin of some sorts, right?
Well see my above comment. :)
...or you need to package for an app store like iOS... but I get your point. I was not trying to say that devs don't need deviceready, just that the functionality of the templates as they stand don't... so it wasn't included. Like I said, it might be worth having in there as an example of how you might use it.
I guess what's taking me back is that it almost feels like heresy to not include it. ;) I mean I get that there are cases where it would not be needed, but it seems odd to not include it by default and maybe have one example where it *isn't* used.
I'm not as deep into the Cordova world as I used to be. Do a majority of people *not* use the event anymore?
Any chance you would know how to make cordova plugins work with capacitor and vue? I can't find anything online. The capacitor api's work like a charm. But I can't seem to get ionic native and cordova plugins to work.
Url to plugin
If you have the knowledge it would probably be a great article. Thans
Sorry - I think this post was one of the last few times I used Cordova.
No worries I found some of the information valuable in this article regardless. Tanks