Ionic 4 Tutorial with Vue

Ionic 4 Tutorial with 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 Ionic 4 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

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/[email protected]/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/[email protected]/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

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.

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('/')
      }
  }

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 Ionic 4 tutorial we've seen how to build a simple mobile application with Vue, Ionic 4 and Cordova.

  • Date: