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.
::: tip 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 :::
::: danger 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.
:::warning 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
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.
::: tip Pros
Active, growing English speaking community
First-class support by NativeScript
Very actively developed
Vue-Devtools support
Cross-platform without maintaining two code bases. :::
::: warning 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:
Vue CLI - official CLI plugin to transform SPA's to PWA
Nuxt PWA - Nuxt module that adds PWA support to Nuxt apps
Vuepress - Plugin to enable offline support
Quasar - Out of the box PWA generator via CLI
Gridsome - Generates out of the box PWA ready app
Hybrid Apps
Hybrid apps are built by reusing well established tools for making websites like HTML, CSS and JavaScript with a minimal extra learning curve. These web based projects can then be compiled to native mobile apps with build tools such as (Cordova)[https://cordova.apache.org] or it's more recent successor (Capacitor)[https://capacitorjs.com]. The build tool wraps the web app in a native shell and provides access to native device functionality via unified JavaScript APIs. This allows developers to write one code base that can then run natively across platforms.
::: tip 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 :::
::: danger Cons
Generally slower than Native apps
Access to lower level device APIs is dependent on wrapper (Cordova or Capacitor)
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
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 easy application bootstrapping, managing, and bundling your mobile app for each platform. Integrates many tools into a full featured framework including support for PWAs, i18n, Vuex, Vue Router, code splitting, option of Cordova or Capacitor for native builds and more.
Ionic Vue
One of the most popular mobile UI frameworks in the world, Ionic was originally built for Angular, but with their latest release they now support Vue 3, thanks to their move to web components.
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 concepts are the same. New material targeting Ionic Vue is starting to emerge gradually now that it has finished beta.
As with other frameworks, it provides a set of components that change look depending on the OS they are built for and a CLI tool for starting projects and easily integrating Capacitor for native builds.
::: warning Keep in mind
Still young and small community :::
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 using Cordova, 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
::: contribute :::
Mint UI
::: contribute :::
Last updated