Learning Vue for Ionic/Angular Developers – Part 5

Over the last four tutorials, we have covered most of the basics you need to know in order to build Ionic applications on top of the VueJS framework. One big step we have remaining is to get the Ionic/Vue applications that we build running on iOS and Android devices. This is easy to do in the Ionic/Angular environment because the Ionic CLI handles integrating with Cordova for us. However, when using Ionic/Vue we will need to do some extra configuration ourselves.

In this tutorial, we are going to walk through how we can use Cordova to wrap our Ionic/Vue code into a native application. The method we will use will allow you to easily integrate Cordova into a Vue project that has been built with webpack and the Vue CLI.

NOTE: We will not be covering setting up Ionic with Vue in this example as we have already covered that in the previous tutorials. We will just be setting up a default Vue CLI project to be built with Cordova. If you would also like to know how to add Ionic to this Vue project, you should start back at Part 1.

1. Adding Cordova to a VueJS Project

The first thing we need to do is get both Cordova and VueJS working together within the same project. Fortunately, this is quite easy. However, it is actually easier to integrate an existing VueJS project into a new Cordova project rather the other way around.

We are going to create a new project with Cordova first. In order to do that, you will need to have Cordova installed on your machine. You likely already have this installed, but if you do not, you should first run the following command to install the Cordova CLI:

npm install -g cordova

Once you have Cordova installed, you can create a new Cordova project with the following command:

cordova create my-project-name

If you are coming from an Ionic/Angular background, then the project that Cordova creates should look pretty familiar to you (it has most of the files/folders you would see in a normal Ionic/Angular application).

All we need to do is place our final built application files for Vue inside of the www folder in the project. This is the folder that Cordova will wrap up into the native application. Once we have our files in there, we can just use the normal Cordova build commands.

We could just keep our Vue application separate and manually copy the distribution files into the www folder in our Cordova project, but this would be a bit cumbersome and time-consuming. Instead, we are going to add Vue directly into this Cordova application so that we can do all of the development within one project.

To add Vue to the Cordova project, you will just need to run the following command inside of your Cordova project:

vue init webpack

By not providing a project name to this command (like you usually would), it will set up the project inside of whatever folder you are in currently. Otherwise, it would create a new folder to hold the application inside of the Cordova project, which we do not want.

Once you have done that, you can run the following command to check that your VueJS application still builds and runs:

npm run dev

2. Preparing the Application

As I mentioned earlier, Cordova will wrap up whatever files are in the www folder into a native application. Unfortunately, by default, if we run the VueJS build command:

npm run build

The output for the built application is sent to the dist folder. This isn’t a major problem, but we do need to make a couple of changes so that the output is sent to the www folder instead.

Change the build property in config/index.js to reflect the following:

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../www/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../www'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

We have modified the references to dist to be www instead, and we have also made another important change.

IMPORTANT: Note that the assetsPublicPath has been changed to ./ instead of /. Without this change, the file:// protocol will not work, and your files will not be able to be loaded within Cordova.

Since the www folder also has some files in there by default, you should delete the contents of www before building your application for the first time.

We are also going to make a couple of changes to the index.html file of our project. We will need to reference the cordova.js file, and we will also need to add a couple of meta tags.

Add the cordova.js file to index.html:

<script type="text/javascript" src="cordova.js"></script>

NOTE: You do not actually need to have a cordova.js file in your project, you just need to reference it here.

Add the following meta tags to index.html:

<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<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:;"
/>
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />

If you intend to use Git with this project, you may also want to update your .gitignore file:

.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln

*~
*.sw[mnpcod]
*.log
*.tmp
*.tmp.*
log.txt
*.sublime-project
*.sublime-workspace
.vscode/

.idea/
.sass-cache/
.tmp/
.versions/
coverage/
tmp/
temp/
hooks/
platforms/
plugins/
plugins/android.json
plugins/ios.json
www/
$RECYCLE.BIN/

Thumbs.db
UserInterfaceState.xcuserstate

This is all the configuration we need, now we will be able to build our application using Cordova.

3. Building for iOS and Android

Before we can build for iOS and Android, we will need to add the desired platforms to our project using the following commands:

cordova platform add ios --save

cordova platform add android --save

NOTE: In order to build for these platforms, you will need to have the appropriate SDKs for iOS and Android set up on your computer already. If you have not already done this, you can follow the following guides: iOS | Android

If you would like to use any Cordova plugins, you can also install those using:

cordova plugin add plugin-goes-here

Once you have the platforms added, and you have installed any plugins you need, in order to deploy to a device you will first need to build your VueJS application:

npm run build

and then use one of the following commands to run the application using Cordova:

cordova run ios --device

cordova run android --device

That is still a bit of extra unnecessary work (two separate commands, blegh!), so we are going to set up a few of our own commands.

Modify the scripts in package.json to reflect the following:

"scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "build": "node build/build.js",
        "build android": "npm run build && cordova build android",
        "build ios": "npm run build && cordova build ios",
        "android": "npm run build && cordova run android --device",
        "ios": "npm run build && cordova run ios --device"
    },

We have set up 4 additional commands here, which we can use as follows:

npm run build android //Builds the VueJS code and builds the Android application

npm run build ios //Builds the VueJS code and builds the iOS application

npm run ios //Builds the VueJS code and runs the iOS application

npm run android //Builds the VueJS code and runs the Android application

Now we can just run a single command to handle building and deploying the application.

Summary

There is a little extra work involved in getting Cordova set up with an Ionic/VueJS application. However, once you have the application set up like it is above it’s just as easy as Ionic/Angular to build and deploy applications with Corodva.