Building Mobile Apps With Capacitor And Vue.js

In this tutorial, you’ll learn how to use Capacitor and cutting-edge web technologies such as Vue.js and Ionic 4 web components to build cross-platform mobile applications for Android and iOS. You can also take advantage of Capacitor to target other platforms such as desktop and the web using the same code base.

Recently, the Ionic team announced an open-source spiritual successor to Apache Cordova and Adobe PhoneGap, called Capacitor. Capacitor allows you to build an application with modern web technologies and run it everywhere, from web browsers to native mobile devices (Android and iOS) and even desktop platforms via Electron — the popular GitHub platform for building cross-platform desktop apps with Node.js and front-end web technologies.

Ionic — the most popular hybrid mobile framework — currently runs on top of Cordova, but in future versions, Capacitor will be the default option for Ionic apps. Capacitor also provides a compatibility layer that permits the use of existing Cordova plugins in Capacitor projects.

Aside from using Capacitor in Ionic applications, you can also use it without Ionic with your preferred front-end framework or UI library, such as Vue, React, Angular with Material, Bootstrap, etc.

In this tutorial, we’ll see how to use Capacitor and Vue to build a simple mobile application for Android. In fact, as mentioned, your application can also run as a progressive web application (PWA) or as a desktop application in major operating systems with just a few commands.

We’ll also be using some Ionic 4 UI components to style our demo mobile application.

Capacitor Features

Capacitor has many features that make it a good alternative to other solutions such as Cordova. Let’s see some of the features of Capacitor:

• Open-source and free
  Capacitor is an open-source project, licensed under the permissive MIT license and maintained by Ionic and the community.
• Cross-platform
  You can use Capacitor to build apps with one code base and to target multiple platforms. You can run a few more command line interface (CLI) commands to support another platform.
• Native access to platform SDKs
  Capacitor doesn’t get in the way when you need access to native SDKs.
• Standard web and browser technologies
  An app built with Capacitor uses standard web APIs, so your application will also be cross-browser and will run well in all modern browsers that follow the standards.
• Extensible
  You can access native features of the underlying platforms by adding plugins or, if you can’t find a plugin that fits your needs, by creating a custom plugin via a simple API.

Requirements

To complete this tutorial, you’ll need a development machine with the following requirements:

• You’ll need Node v8.6+ and npm v5.6+ installed on your machine. Just head to the official website and download the version for your operating system.
• To build an iOS app, you’ll need a Mac with Xcode.
• To build an Android app, you’ll need to install the Java 8 JDK and Android Studio with the Android SDK.

Reference: https://www.smashingmagazine.com/2018/07/mobile-apps-capacitor-vue-js/