Vue Cordova

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).

$nvm install 12.7.0

$nvm use 12.7.0

Install Cordova and vue-cli globally.

$npm install -g corodova

$npm install -g vue-cli

Init Corodva and & Vue apps into the same directory.

$corodva create {project_name}

$vue init webpack {project_name}

Install required Cordova platforms.

$cordova platform add android

$cordova platform add ios

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:

<meta charset=”utf-8″>
<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”>
<meta http-equiv=”Content-Security-Policy” content=”default-src *; style-src ‘self’ ‘unsafe-inline’; script-src ‘self’ ‘unsafe-inline’ ‘unsafe-eval’; media-src *; img-src ‘self’ data: content:; connect-src ‘self’ ws:;”>
<title>App Title</title>
<script src=”cordova.js”></script>

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

Test that it’s working.

$npm run dev

…and then visit ‘localhost:8080’

Test cordova builds:

$npm build android

$npm build ios

Test in emulators:

$npm emulate andoid

$npm emulate ios

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

If you’re interested in working with Newicon on your next digital project, get in touch now.