How to set up a Vue and Cordova project

Our developers often solve coding problems, then share the solutions with the rest of the team. That got us thinking: if we’ve come across this problem, there are probably a bunch of other developers out there who’ve had the same issue. 

So we decided to put our solutions out into the public, to help whoever needs it. 

Vue is a powerful javascript framework, while Apache Cordova is a tool for packaging up HTML/JS/CSS for mobile apps. When combined into a single project Cordova can use the output of Vue’s build process as it’s source thus allowing packaging of your Vue app for mobiles.

Here’s Dougall’s recent advice on the basics of setting up a combined Vue and Cordova project…

Vue and Cordova advice

Get recent npm (nvm use is optional but probably a good idea).

Install Cordova and vue-cli globally.

Init Corodva and & Vue apps into the same directory.

Install required Cordova platforms.

Configure Vue to build to Cordova’s source directory. In /config/index.js change the build section like this:

Note that removing the default ‘/’ from assetPublicPath is important.

Update the main Vue index file to include Cordova and add suitable permissions etc. In /index.html make these (or similar) changes:

Note that it’s important to get the Content-Security-Policy correct or the browser will block the app.

Test that it’s working.

…and then visit ‘localhost:8080’

Test cordova builds:

Test in emulators:

… at this stage it’s also worth updating Cordova’s /config.xml from the defaults