Using the Capacitor in Vue.js app

In the May 2018 I decided to get acquainted with Vue.js. I used the free Udemy course – Vue.js Fast Crash Course and it’s time to apply some of these knowledges. In the same time, I got familiar with Capacitor. So, I decided to combine these technologies and check is it possible to integrate it.

In this tutorial I want to show you how to add Capacitor into Vue.js project, integrate Capacitor Device API and build the IOS app from Vue.js project.

Getting Started

To follow this tutorial you should have the basic fundamentals of the command line, installed Node, Capacitor, Vue.js CLI and have macOS with installed Xcode.
All the following was done with the next requirements: Node v9.10.0, Ionic v3.20.0, Capacitor 1.0.0-alpha.x, Vue v.2.9.3

Important: In this tutorial, we used Capacitor version Alpha, so it’s not production ready. 

Set up the Vue.js Application

To scaffold a simple Vue.js project we need to install vue-cli using the following command:

Then we create a simple project using installed CLI tools. Let’s call our project as vue-capacitor-example. Run the following in your terminal:

You will be asked some questions. Here is the screenshot, how to answer them:

vue-capacitor-example
vue-capacitor-example

Once you created a starter project, let’s check how it works. We need to run the next sequence in the terminal:

You will see next page on the 8080 port in your browser:

Vue.js App
Vue.js App

Integrate Capacitor

To add Capacitor inside our app, run the following command inside the project folder:

After this, we need to initialize the Capacitor with the information about the application. The app name will be vue-capacitor-example, the app package ID – com.roma.vueCapacitorExample.

Change Webpack Config

By default, Webpack config in this scaffold Vue.js project is designed to build all files into dist/ folder, but it does not suit us. You can check this when you try to build the project using the next command:

Now, you can see the dist/ folder inside the project:

dist/ folder inside the projec
dist/ folder inside the project

The Capacitor is using www/ folder to copy all built web assets. We can decide this moment by redesigning Webpack config to fit our requirements.
Just open the config/index.js and copy-paste the next code:

Please, don’t forget to save this file. Now run again the previous command and check the project directory. You will see newly created www/ folder:

www/ inside the project
www/ inside the project

App Template

Next, we will change our App template. In this tutorial, we will show the internal information about the device using the Capacitor Device API by clicking a button. We will make all changes in the default src/App.vue file. Usually, the single component in the Vue.js app have the next structure:

  • template
  • script
  • style

And I will show you what we need to do by every section.

First of all, we need to include Capacitor inside the script section. Inside the methods property of App component, we will create a getDeviceInfo method. It will get the information about our device and set this info to info variable. Here is the code of script section:

Then, let’s create the simple template. Our template will be just button and one paragraph:

What about style section? We don’t need it in this case, we just only need to show data.

The final code of src/App.vue file will look like this:

If you update this project and run, you can get the information about your device in the browser:

Device Info

After clicking “Get Device Data”:

info-about-device-after-clicking

Build IOS project

In this tutorial, I want to focus only on IOS and Web. We can add IOS platform using the following:

Let’s rebuild project again for confidence and cope our web assets:

Now, we can open our IOS project in the Xcode using the next command:

Once Xcode is open, we can run our IOS app in the emulator using the play button:

IOS app capacitor-vue-example
IOS app capacitor-vue-example

After running the app you will see the Loading Screen with the logo of Capacitor:

Capacitor Loading Screen
Capacitor Loading Screen

When the application is loaded, you will see the button:

IOS app with the button
IOS app with the button

After clicking on this button you will get the information about the used IOS-emulator:

IOS app with device info
IOS app with device info

Summary

In this tutorial we learned how to:

  • install Vue.js scaffold project using the Vue.js CLI
  • integrate Capacitor to existing frontend project
  • use Capacitor Device API inside Vue.js app
  • build Vue.js app to Xcode project using the Capacitor and run it in IOS emulator

All code related to this tutorial you can find here.

If you liked this, please help spread the word by hitting the recommend button below. Thanks!