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…

Dougall Winship

Senior Developer
·1 min read (342 words)

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:

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

I'm Dougall Winship

Senior Developer at Newicon

Join the newsletter

Subscribe to get our best content. No spam, ever. Unsubscribe at any time.

Get in touch

Send us a message for more information about how we can help you