Roundup: Vue.js Mobile Hybrid App Frameworks - Updated Q4 2017

Hybrid mobile apps and progressive web apps are becoming increasingly more common. There are a number of projects that provide a pre-made set of UI Components and APIs to make interaction with your mobile device cleaner and more easily accessible. Here are a few that allow you to write your hybrid or web apps with Vue.js 2.0. This list is restricted to frameworks that provide a full-on experience, supporting common touch and swipe gestures, and so on.

At the moment I’m not yet covering NativeScript and Weex because they’re just a bit too alpha-quality to use for anything serious yet, but I hope to be able to add them soon.

Onsen UI

Onsen UI is powerful UI kit. It’s main goal is to provide perfectly native-looking and native-acting components. As a result, it includes platform-specific animations, gestures, and layouts. It provides both iOS and Material Design Web Components with bindings for a variety of frameworks, including Angular 1, Angular 2+, React, and, of course, Vue 2. It even handles the ahem quirks of the iPhone X.

Onsen also tries to make your app size as small as possible, which can mean quite a bit for speed when dealing with a slow mobile device or connection.

Compared to Quasar (below), Onsen’s components look a bit more native and less clunky, but at the moment the component collection is smaller.

Onsen also provides a set of interactive tutorials which can make it much easier to understand and debug each component. Like most of the frameworks reviewed in this article, Onsen requires use of Cordova to actually package your code as a hybrid mobile app. The company behind Onsen, however, provides a CLI and Monaca, an optional web-based tool to simplify this process.

Rundown

• Actively Developed: Yes
• Development Status: Stable
• Popularity: ~5,700 stars
• License: Apache 2.0
• Documentation Quality: Thorough
• Documentation Language: English
• Design Spec Accuracy: High
• Themes: Material, iOS, Custom - Automatic platform detection
• Target Platform Versions: Android 4.4+, iOS 8+, additional Cordova targets
• Platform API Wrappers: None / through Cordova
• Repository: https://github.com/OnsenUI/OnsenUI

Conclusion (TL;DR)

Onsen is an excellent choice, as it seems to have an active community, frequent release cycle, and a company behind it. Of the various options in this article, If you’re worried about native appearance, long-term support, reliability, or tooling, Onsen UI is probably for you. You might have to sacrifice a few components though, such as date pickers.

Quasar Framework

Like Onsen, Quasar framework also provides a CLI tool to speed up initial setup and development. Quasar is the only framework in this list that explicitly targets Electron as well, providing wrappers for both it and Cordova. As a result, it earned a place in our Desktop Component Roundup.

Quasar provides excellent documentation that covers a wide variety of topics that you may run into while developing your app, as well as stellar variety of components and excellent documentation for all of them.

The biggest area where Quasar suffers, however, is the default theme set. Neither the Material or iOS themes look quite… right. There’s a bit of an uncanny valley feeling with them, so if you choose Quasar, you might want to spend some time modifying the default themes for your own use-case. (Perhaps submit your changes back to the Quasar repository?)

Rundown

• Actively Developed: Yes
• Development Status: Stable
• Popularity: ~4,200 stars
• License: MIT
• Documentation Quality: Thorough
• Documentation Language: English
• Design Spec Accuracy: Low
• Themes: Material, iOS, Custom
• Target Platform Versions: Android ~4.1, iOS 7+, any Cordova targets, any Electron targets
• Platform API Wrappers: None / through Cordova or Electron
• Repository: https://github.com/quasarframework/quasar

Conclusion (TL;DR)

Quasar is unique in the number of supported target platforms, and provides extensive documentation and support. Howeverl, the built-in themes are not exactly spec-accurate, so you might need to do some work on them if you plan to release a professional-grade app.

For hobby projects though, where these concerns are less relevant, Quasar seems to be a great choice.

Framework 7

Framework 7 is incredibly popular. It’s been around for a fairly long time, and has been used in production by a number of smaller companies.

Originally developed with only iOS in mind, Framework 7 has since expanded to Material Design as well. The themes for both platforms are excellently designed, meshing fairly well with native controls. The animations and gestures do feel a bit odd though, and I’m not sure why. As an added bonus, Framework 7 is designed to be extensible via. plugins, though the majority of them seem to be designed for plain vanilla usage, not for Vue.

It contains an absolutely massive selection of components, and quite a bit of documentation to go with them. However, it does not appear to support custom themes, at least not out-of-the-box. You may have to do it yourself with CSS overrides.

Rundown

• Actively Developed: Yes
• Development Status: Stable
• Popularity: ~11,300 stars
• License: MIT
• Documentation Quality: Decent
• Documentation Languages: English, 中文 (Chinese)
• Design Spec Accuracy: High
• Themes: Material, iOS - Automatic platform detection
• Target Platform Versions: Android ~4.1, iOS 7+, any Cordova targets
• Platform API Wrappers: None / through Cordova
• Repository: https://github.com/framework7io/Framework7

Conclusion (TL;DR)

Framework 7 is a proven framework that provides just about everything you need for a hybrid web app.

However, Framework 7 prefers to use its own built-in libraries over allowing you to choose, instead opting to use its own routing and DOM management systems, and offers little in the way of themeing choices. If that’s fine with you, than go with it.

If there’s anything you think is missing or should be added, or would like to inform us of your choice of app UI framework, we’d love to hear from you.

h2::after { background: none !important; }