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…
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…
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:
build {
index: path.resolve(__dirname,'../www/index.html'),
assetRoot: path.resolve(__dirname,'../www'),
assetSubDir: 'static'
assetPublicPath: ''
}
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:
<html> <head> <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>GenuineImpact</title> <script src="cordova.js"></script> </head> <body> ...
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 android
npm emulate ios
… at this stage it’s also worth updating Cordova’s /config.xml from the defaults
Subscribe to get our best content. No spam, ever. Unsubscribe at any time.
Send us a message for more information about how we can help you