Soshace

Building Mobile Apps With Vue3 and Ionic
Building Mobile Apps With Vue3 and Ionic

Introduction

Ionic is an open-source UI framework and toolkit that helps developers build highly efficient and performant apps for native iOS, Android, and the web (PWA). On October 15th, 2020, the Ionic team announced the official release of Ionic-vue, a new way of building applications using the two technologies you already love: Ionic and Vuejs. In this tutorial, we are going to be creating a simple application (shown below) to demonstrate the basics of how ionic-vue works.

Simple Ionic-vue application
Simple Ionic-vue application

Requirements

This tutorial assumes you have at least a little experience with Vuejs and the Ionic framework and that you have the following setup on your computer. If you don’t, head over to their respective download pages to set them up.

  • NodeJs and NPM: Download here
  • A text editor – eg VSCode, Atom, etc
  • Android Studio: Download for Windows, Linux, and Mac users here.
  • X-Code: Download for Mac users here

Setting Up The Development Environment

Verify you have NPM and NodeJs installed on your computer by running

npm -v

If NPM is installed, you should get a response similar to the screenshot below. If you get a command not found error, you may need to reinstall NPM.

The output of running npm -v
The output of running npm -v

Once you verify the Node Package Manager (NPM) is installed, Open up a terminal and install the ionic CLI  globally on your computer by running the command below:

npm install -g @ionic/cli

Creating Our Ionic Vue Project

Ionic provides starter files to make development less stressful. The ionic starter app has different options namely

  • tabs: a boilerplate preconfigured with a bottom tabbed navigation system
  • side-menu: a boilerplate that comes shipped with a side menu navigation system
  • blank: A simple boilerplate with no extra features

In this tutorial, we will make use of the blank template as we do not need other features.  Run the following command to generate a blank starter project in any directory of your choice eg: /desktop.

ionic start ionic-vue-demo-app blank --type vue

Once the starter app has been generated successfully, run the ionic serve command and head over to http://localhost:8100 to preview your project in the browser. Next, open the ‘ionic-vue-demo-app’ folder in your preferred editor eg VS Code, and let’s begin creating our demo ionic vue app!

Ionic-vue folder structure
Ionic-vue folder structure

Adding Mobile Platforms Support

To make your application available on mobile devices, run either or both of the following to enable support.

ionic cap add ios # to enable support for ios devices

ionic cap add android # to enable support for android devices

Debugging on iOS

If you’re a mac user and you want to preview your application in an ios simulator, ensure you have a recent version of x-code installed, then run the following commands to enable iOS support, run a production build of the app, and then open the project for debugging in x-code respectively.

ionic cap add ios 
ionic run build 
npx cap open ios

In x-code, click on the run button to launch the app in your preferred simulator.

Previewing your Ionic Vue app in X-code
Previewing your Ionic Vue app in X-code

Debugging on Android

Similarly, to enable debugging for android, run the following commands to set up the required Gradle files and open in android studio.

ionic cap add android
ionic run build
npx cap open android

Once the project has been opened in android studio, click on the run icon to launch the app in an emulator of your choice.

Previewing your Ionic Vue app in Android studio
Previewing your Ionic Vue app in Android studio

A simple Demo

Creating Markup

Components in Ionic-vue has pretty much the same syntax as in ionic,  hence, you should have no trouble if you are familiar with ionic already. The only difference is that you would need to import each component from ionic/vue inside your <script> </script> later. To learn more about components and tags available in ionic Vue, visit the official documentation here. Open the Home.vue file and add the following markup

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Demo Application</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="small">Demo Application</ion-title>
        </ion-toolbar>
      </ion-header>

      <div
        id="container"
        v-bind:class="{ 'top-margin': !users, usersShowing: users }"
      >
        <ion-button v-show="!users" @click="loadUsers()" expand="block"
          >View All Users</ion-button
        >
        <strong v-show="users"> All Users</strong>
        <ion-list>
          <!-- Loops through the users array -->
          <ion-item v-for="user in users" v-bind:key="user.id"> 
            <ion-label>{{ user.name }} </ion-label>
          </ion-item>
        </ion-list>
        <ion-button v-show="users" @click="users = null" color="danger"
          >Hide Users</ion-button
        >
      </div>
    </ion-content>
  </ion-page>
</template>

Adding Logic and Making API calls

To add Javascript logic to our application, we make use of script tags just as in a typical Vuejs file. this script tag is where functions and data relating to our application will be stored. We need to make an HTTP GET request to https://jsonplaceholder.typicode.com/users to get a JSON array of Dummy user data. We will use Axios to make the call but feel free to use any client of your choice.

To install Axios, run:

npm install axios --save

Next, import it into the project along with any other utility you need. Next, Let’s add the  following Javascript logic to make API calls to the mock JSON server as such:

<script lang="ts">
import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
} from "@ionic/vue";
import { defineComponent } from "vue";
import axios from "axios";

export default defineComponent({
  name: "Home",
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
  },
  data() {
    return { users: null }; // sets users to null on instantiation
  },
  methods: {
    loadUsers() {
      axios
        .get("https://jsonplaceholder.typicode.com/users")
        .then((response) => {
          this.users = response.data; // assigns the data from api call to the users variable
        });
    },
  },
});
</script>

Adding Styling

To add styling to our view, create a regular <style> </style> tag and add the following stylesheets to give our app page a better look:

<style scoped>
#container {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;

  transform: translateY(-50%);
}
.top-margin {
  top: 20%;
}
.usersShowing {
  margin-top: 70%;
}
</style>

In the end, the Home.vue file should look like this.

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Demo Application</ion-title>
      </ion-toolbar>
    </ion-header>
    
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="small">Demo Application</ion-title>
        </ion-toolbar>
      </ion-header>
    
      <div id="container" v-bind:class="{ 'top-margin': !users, 'usersShowing': users }">
     
          <ion-button v-show="!users" @click="loadUsers()" expand="block">View All Users</ion-button>
          <strong v-show="users"> All Users</strong>
    <ion-list>
      <ion-item v-for="user in users" v-bind:key="user.id">
        <ion-label>{{user.name}} </ion-label>
      </ion-item>
    </ion-list>
  <ion-button v-show="users" @click="users = null" color="danger">Hide Users</ion-button>
      </div>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
import { defineComponent } from 'vue';
import axios from 'axios';

export default defineComponent({
  name: 'Home',
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar
  },
  data(){
    return {users : null} // sets users to null on instantiation
  },
  methods: {
loadUsers(){axios.get('https://jsonplaceholder.typicode.com/users').then(
    response => {
      this.users = response.data // assigns the data from api call to the users variable 
    }) 
    }
  },
  
  }
)
</script>

<style scoped>
#container {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
 
  transform: translateY(-50%);
} 
.top-margin{
 top: 20%;
}
.usersShowing{
  margin-top:70%;
}

</style>

Syncing Changes

Once you’re ready to see your changes deployed to its specific mobile platforms, run the npx cap copy command to sync your changes to ios and android and run a fresh preview of your application. The end result of the app should look like this on ios:

 Screenshot of app preview
Screenshot of app preview

Conclusion

What’s your favorite thing about Ionic Vue? do reach out in the comment section below if you have any questions or suggestions, I cant wait to see what you build with this awesome framework 🙂

You can view the full source code of the project on Github here

Leave a Reply