Building Mobile Apps With Vue3 and Ionic

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

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:

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.

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.

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.

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.

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

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:

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:

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:

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

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

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

Building Web Apps with Vue 3 composition API + Typescript + Vuex(4.0)

In this tutorial, we are going to create a task management application to demonstrate how to build applications with the new Vue 3 composition API, ...

20.01.2020

Introduction to Vue.js Event Handling

In this article, we'll look at how to listening to events in a Vue app so that we can make our app interactive by responding to ...

Form Validation in Vue Using Vuelidate

Collecting data from users is an important feature in web applications. The best approach is to make use of forms, which involves the user entering ...

No comments yet

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy