Mobile Apps

Building mobile applications with JavaScript is not a new thing and has been around for quite some time now. The advantages over native solutions, built with Swift or Android is that you could apply what you know about building web apps, and leverage some of the thousands of packages on npm.

On this page, we will go through the different ways one can build a mobile app with Vue, and the pros and cons behind each.

Summary (TLDR)

Compile to Native

These are applications that are written in JavaScript by using a predefined set of custom UI components. During build time, the code then gets transformed to native for each required platform.

The benefit of using such applications is that you can use your existing JavaScript knowledge to build truly native apps that can look and feel native. Components made in Native code can also be integrated with such apps.

Pros

  • Builds to Native platform code
  • Performant
  • Direct access to all native APIs
  • Allows usage of already existing platform UI components
  • Apps can look and feel truly native

Cons

  • Cannot use HTML, only provided XML-like components by framework
  • Cannot use CSS to style components
  • Need to use different components for each platform

Weex

Weex was the first native solution for Vue.js. The framework was written by developers of top Chinese companies and fully supports Vue components. It promises a "build once, ship everywhere" methodology, opposed to other similar solutions.

It has a CLI tool, official UI theme and a set of plugins.

Weex has a deep integration with Vue, thus the support parity between the two is very good.

Keep in mind

  • It is developed and used mostly in China, so it may be a con for someone.
  • Not enough learning material in English, besides official docs.

NativeScript-Vue Popular

NativeScript-Vue is a NativeScript plugin which allows you to use Vue.js to craft your mobile application.

NativeScript-Vue is one of the most popular solutions for native mobile apps with Vue.

It offers excellent developer experience for building truly native mobile apps. Similar to ReactNative, as with other similar frameworks, you develop using a set of pre-built Vue components, using the existing Vue and JS knowledge. Knowledge of Native API's is required

With a vast growing popularity and community, the wide adoption of NativeScript across companies, first class support for Vue by official NativeScript team, it is a very good choice.

Pros

  • Active, growing English speaking community
  • First-class support by NativeScript
  • Very actively developed
  • Vue-Devtools support
  • Cross-platform without maintaining two code bases.

Keep in mind

  • Routing is done manually, no Vue-Router support
  • Styling is done via a constrained set of CSS rules
  • Lots of examples for Angular, might need to adapt

Vue-Native

Vue Native is a mobile framework made for building native mobile apps using Vue.js. It acts as a wrapper around React Native APIs, which allows you to use Vue.js to compose rich mobile User Interfaces. For APIs that React Native does not support, you have to write "bridges" in the platform's native code or install external plugins.

Being younger than NativeScript-Vue, it has a smaller community and adoption, but is nonetheless growing as well.

Progressive Web Applications

Progressive Web Apps are basically mobile friendly SPA's, that can be installed as native apps on your mobile device, from within the browser. They give you the freedom to choose how you build the app, using the already known web technologies, without the need to wrap it with PhoneGap or similar.

Such apps still run inside a hidden browser window, so they are limited to what the browser's APIs offer. Nonetheless, these apps are receiving a wide adoption and are a very good choice for cases where the website and mobile application should function the same.

Below is a list of popular tools to generate a PWA quickly:

Hybrid Apps

Hybrid apps are built by reusing already establishes knowledge about making websites using HTML, CSS and JavaScript with a minimal extra learning curve. SPA's can be converted to mobile apps with a tool called Cordova. It acts as a wrapper around your web app by providing access to device hardware and functions via a unified JavaScript API. It allows developers to write one code that can run on all platforms.

Pros

  • Uses plain HTML, CSS and JavaScript
  • Build once, run everywhere
  • Can be fully custom styled with CSS
  • Wide range of Established UI libraries
  • Cheaper to create than Native

Cons

  • Generally slower than Native apps
  • Access to lower level device APIs is dependent on wrapper (Cordova)
  • Platform inconsistencies

Mobile UI libraries

These are UI frameworks that offer native mobile looking components, build for the web with Vue and CSS. These components try to mimic the look and functionality of their native counterparts as close as possible.

Most UI frameworks allow you to use the same component and swap out it's styling during the bundling phase, giving it a native look for the current mobile platform.

Some frameworks focus more towards one platform, so careful consideration must be taken, if true native look is required for each platform.

Quasar Popular

Quasar is a very active and fast growing Vue UI framework, one of the first targeting desktop and mobile in particular. It offers a large and ever extending set of pre-built components, some mimic mobile elements, and a bunch of other useful general use case ones.

Quasar comes with a CLI for managing and bundling your mobile app for each platform, using PhoneGap. CLI allows easy application bootstrapping, with support for PWA, i18n, Vuex, VueRouter, Async Code splitting and more.

Framework 7

Framework 7 is an already established, mobile focused UI framework, offering native like looking themes for both IOS and Android. It was originally built with IOS in mind, with Material Design added later.

They officially support Vue on top of their components. Along with mobile apps, you can easily develop Web Apps (SPA) with PWA support via their CLI.

They have a nice documentation, though the Vue part is lacking a bit on explanations, so jumping between it and standard component docs may be necessary.

Onsen UI

This section could use a little bit of love.

If you're able to, please consider helping the Vue Community by contributing a PR.

You'll find a link to edit this page at the bottom.

:::..

Mint UI

This section could use a little bit of love.

If you're able to, please consider helping the Vue Community by contributing a PR.

You'll find a link to edit this page at the bottom.

Ionic Vue Beta

One of the most popular mobile UI frameworks in the world, Ionic was originally built for Angular, but with their latest release they support Vue, thanks to their move to web components.

Keep in mind their Vue implementation is still in Beta and is yet to be ironed out. Ionic has a vast community, but as most tutorials are for the previous versions, using Angular, Vue users might have to adopt the examples, but the concept is the same.

As with other frameworks, it provides a set of components that change look depending on the OS they are built for.

Keep in mind

  • Still in Beta and developed
  • Very young and little to no community around it
  • Almost no docs or learning material