How to setup a Cordova App using Vue.js

How to setup a Cordova App using Vue.js
In the last period I decided to study Vue.js because I feel the necessity to have a first approach with single page applications. The best way to learn this framework is building a real application like an advanced todo-list or other kind of app that make sense. For this reason I chose to integrate my first Vue.js app with Cordova to build an hybrid application for iOS and Android.

I read few articles to understand how to put these technologies togheter and I found a lot of solutions. In this article I want to explain how setup your hybrid app step-by-step.

Before starting, you have to know that you need the npm installer (node package manager) and Webpack to proceed. If you don’t know anything about it, take a look to their documentation.

Are you ready? Let’s go!

So, first of all, open the Terminal and install the vue command line interface and cordova globally using npm.

npm install -g cordova
npm install -g vue-cli

Easy right? Now you have to create a new Cordova application and a Vue.js project based on the Webpack template so just run the following commands:

cordova create project-name
vue init webpack project-name

Terminal will ask you “Target directory exists. Continue?” because the project directory already exists because it was created in the previous Cordova step. “Yes” will be the right answer. After the init procedure you have to delete all files into the www folder before proceeding.

Good! You installed everything you need. Claps for you.

Now we have to do some changes in different places of our project before building the application.

So, start from root. Open the index.html file and perform the following change:

<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 ‘self’ data: gap: https://ssl.gstatic.com ‘unsafe-eval’; style-src ‘self’ ‘unsafe-inline’; media-src *; img-src ‘self’ data: content:; connect-src ‘self’ ws:;”>
    <title>Project Name</title>
    <script src=”cordova.js”></script>
  </head>
  <body>
    <div id=”app”></div>
    ...

Now you need to change the destination path to move your builded project into the www cordova folder. So open the config/index.js file and change it in this way:

build: {
  index: path.resolve(__dirname, ‘../www/index.html’),
  assetsRoot: path.resolve(__dirname, ‘../www’),
  assetsSubDirectory: ‘static’,
  assetsPublicPath: ‘’
}

Last but not the least, change name, author, description values in config.xml

Before explaining you how to build your app and test it in your devices, I want to give you a gift. I spent a lot of time to understand how to solve two struggle things and my gift is the solution.

The struggle things are Custom Fonts and js minification issue.

If you want to use a custom font in your app you need to change an option into build/webpack.base.conf.js file. If is it your case, just open the file, find the webpack module test about fonts and add the publicPath option:

publicPath: process.env.NODE_ENV === ‘production’ ? ‘../../’ : ‘/’

The final result to solve font load issue will be this:

test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: ‘url-loader’,
options: {
  limit: 10000,
  name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]’),
  publicPath: process.env.NODE_ENV === ‘production’ ? ‘../../’ : ‘/’
}

The second struggle thing is the js minification issue. This is the bug on production mode:

SyntaxError: Cannot declare a let variable twice: ‘e’

Webpack uses the UglifyJs plugin to minify js code but there is a little problem… SAFARI v10! To understand better read this GitHub issue.

You need to change the UglifyJsPluginoptionsin this way to solve this problem:

new UglifyJsPlugin({
 uglifyOptions: {
  safari10: true,
  compress: {
   warnings: false
  }
 },
 ...
})

Add Platforms that you need

After these fixes you need to add target platforms using cordova command line interface.

cordova platform add [email protected] —-save
cordova platform add ios --save

Note for Android: I suggest to use the 6.x.x version to increase cordova plugins compatibility.

If you are using Git versioning, I suggest you to ignore plugins, platforms and www folders after this operation.

Build and test!

Ready to test? You need to build your hybrid app and create your app for each platform that you define.

npm run build
cordova build android
cordova build ios

And now… RUN!

cordova run ios — device
cordova run android — device

Thanks for reading and enjoy your app ;)

Recommended Courses:

☞ Learn Vue 1 JS introduction to simple reactive JavaScript

☞ Vue JS Essentials with Vuex and Vue Router

☞ Vue JS: From Beginner to Professional

☞ Getting Started with Vue JS

☞ Vue.js Fast Crash Course

☞ Nuxt.js - Vue.js on Steroids

Suggest:

☞ Hybrid Platform Setup: Cordova + Vue + WebPack

☞ Build a Quiz App Using Vue JS | Vue JS Quiz App Demo | Vue JS Project Tutorial | Simplilearn

☞ Ecommerce Furniture App UI Design - Flutter UI - Speed Code

☞ React vs Vue - I Built the Same App in Both Frameworks

☞ Build a Native Desktop App with Electron (YouTube Stats App)

☞ Build a NOTES APP with Vue JS and Nhost using GraphQL & Tailwind CSS