Building a Mobile Application with Vue, Ionic 4 and Cordova
Tags: ionic, vue
Published: 2018-03-27 19:35:47

---
title: "Building a Mobile Application with Vue, Ionic 4 and Cordova"
published: true
tags: ionic, vuejs
canonical_url: https://www.techiediaries.com/ionic-vue/
---

Ionic 4 is the latest version of Ionic that utilizes web components thanks to Stencil

Ionic 4 allows you to use any JavaScript/TypeScript front end library or framework such as Angular, AngularJS, Vue or React etc. to build mobile applications so you are not forced to TypeScript and Angular like the previous versions i.e 3.x.x or before.

## Summary

In this tutorial you will learn \* how to install the Vue CLI \* how to use the Vue CLI to generate a new Vue project \* how to integrate Ionic 4 components with your Vue application

## Generating the Vue Application

First of all make sure you have Node and NPM installed then start by installing the Vue CLI

```
$ npm install vue-cli -g
```

This will install the Vue CLI globally. If the installation fails for permission reasons you might want to add _sudo_ to your command.

Now you can create a new Vue.js project based on the Webpack template so just run the following command

```
$ vue init webpack ionic4-vue
```

The Vue CLI will ask you for a bunch of information and whether you want to use some components like the Vue Router or not. Answer those questions then wait for your project to be generated and for the dependencies to be installed.

Next navigate inside your project root folder and run

```
$ npm run dev
```

This will start the Webpack development server on port _8080_. You can navigate with your web browser to http://localhost:8080 to see your Vue application up and running

![Vue application](https://screenshotscdn.firefoxusercontent.com/images/74239f95-bc6a-4084-8180-cc9a1ccd72c9.png)

## Adding Ionic 4

To add Ionic 4 components to your Vue application you will have to use the core Ionic JS file. That's the only way for now until Ionic 4 final will be released.

So go ahead and open the `index.html` which lives at the root folder of your Vue application and then add the following `<script src='https://unpkg.com/@ionic/core@0.0.2-20/dist/ionic.js'></script>` tag to include the Ionic 4 core file that contains the UI components you usually use with Ionic.

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>ionic4-vue</title>
    <script src='https://unpkg.com/@ionic/core@0.0.2-20/dist/ionic.js'></script>

  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
```

Next open `src/components/HelloWorld.vue` component then add the following content:

```
<template>
  <ion-app>
    <ion-page class="show-page">
      <ion-header>
        <ion-toolbar>
          <ion-title>Ionic 4 + Vue Application </ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="content" padding>
          <ion-list>
            <ion-item v-for="item of items" v-bind:key="item.id">
              <ion-label full></ion-label>
            </ion-item>
          </ion-list>
      </ion-content>
    </ion-page>
  </ion-app>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      items: [{id: 0, name:'Ahmed'},{id:1, name: 'Naima'}]
    }
  },  
}
</script>
```

This makes use of `<ion-list>` to display a set of items

![](https://screenshotscdn.firefoxusercontent.com/images/8fa32336-2315-49e4-a55f-cce0037f5bb9.png)

You can also use any other Ionic 4 component so feel free to experiment with your demo application to understand how Ionic components can be used in Vue.

If your run your application in a real mobile device you will notice a problem in scaling. You can fix the scaling issue on mobile all you need to do is using a `<meta>` tag that sets the viewport

Add these meta tags from an Ionic application:

```
<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">
```

## Adding Routing/Navigation

Next you will use the Vue Router to navigate between different pages in your application since the Ionic Navigation Controller is not available in Vue (it's an Angular component)

So add an Ionic 4 button in `HelloWorld.vue` component and bind its _click_ handler to a _goToPage2()_ method

```
<ion-button @click="goToPage2" full>Go To Page II</ion-button>
```

Next in the same file add the following code

```
methods: {
    goToPage2 () {
      this.$router.push('page2')
    }
  }
```

The _goToPage2()_ method uses the _push()_ method of the Vue Router to navigate to page 2 (similar concepts to Ionic/Angular _NavController_)

Now you need to create the Page 2 component

In `src/components` create the file `Page2.vue` then add the following content

```
<template>
  <ion-app>
    <ion-page class="show-page">
      <ion-header>
        <ion-toolbar>
          <ion-title>Ionic 4 + Vue Application </ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="content" padding>
        This is page 2
      </ion-content>
    </ion-page>
  </ion-app>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
    }
  },  
  methods: {
  }  
}
</script>
```

Next you need to create a route for this component. Open `src/router/index.js` then update it to reflect the changes

```
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Page2 from '@/components/Page2'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/page2',
      name: 'Page 2',
      component: Page2      
    }
  ]
})
```

We import the _Page2_ component we created before then we add a new route to setup navigation.

![](https://screenshotscdn.firefoxusercontent.com/images/7b4073ec-f658-4397-b154-3b874728c257.png)

Also head back to `Page2.vue` and add an Ionic 4 button to navigate back to the _HelloWorld_ page

```
<ion-button @click="goToHome" full>Go Home</ion-button>
```

Next add the _goToHome_ method to the array of methods

```
methods: {
      goToHome(){
          this.$router.push('/')
      }
  }
```

![](https://screenshotscdn.firefoxusercontent.com/images/a4a36777-e1bd-4c81-8e5f-d909c7922278.png)

When using Ionic with Angular you have _NavController_ which relives you from explicitly define routes for your application but when using Ionic with Vue you don't have any Vue helper classes to achieve the same thing so you need to define your routes manually.

## Integrating Vue with Cordova

First let's start by installing Cordova globally if you don't already have it installed

Open your terminal and run the following command

```
npm install -g cordova
```

Next you need to create a Cordova project by running the following command:

```
cordova create ionic-vue-cordova
```

Next navigate inside your project folder then copy the built files of your previously created Vue application inside the **www** of your Cordova project

Also make sure to clear the **www** from any files before your copy Vue files and add the following line to `index.html`

Add the `cordova.js` file to `index.html`:

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

A better way to do this is by placing your Vue project inside the Cordova project then setup Vue Webpack files to directly generate the built files inside the Cordova **www** folder

Simply open `config/index.js` then change the target build folder to _www_:

```
build: {
  index: path.resolve(__dirname, '../www/index.html'),
  assetsRoot: path.resolve(__dirname, '../www'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './',
```

Also the _assetsPublicPath_ is changed from `/.` to `./` this will allow the files to be loaded with Cordova.

### Building for iOS and Android

Building your app for Android or iOS is similar on how you usually do that with Ionic (since it also uses Cordova behind the curtain).

So you first need to add a target platform

```
cordova platform add ios --save
cordova platform add android --save
```

Next you need to build your Vue app then copy the files inside the _www_ folder

```
npm run build
```

If you have configured the Vue application to output files inside the _www_ folder directly then you don't need to manually copy them.

Next use the following commands to run your app in a real device

```
cordova run ios --device
cordova run android --device
```

## Conclusion

In this tutorial we've seen how to build a simple mobile application with Vue, Ionic 4 and Cordova.