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.
Onsen UI
Onsen UI is a newer UI kit, but is evolving quite rapidly, having already released a 2.0 version. It provides both iOS and Material Design components for a variety of frameworks, including AngularJS, Angular 2+, React, Meteor, Vue 1, and, of course, Vue 2. That said, the Vue 2 version is still in development and the documentation is not entirely complete.
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 the 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: Alpha
- Popularity: ~4,300 stars
- License: Apache 2.0
- Documentation Quality: In Progress
- Documentation Language: English
- Design Spec Accuracy: Medium
- 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 looks like a fairly stable choice for the time being, as it seems to have an active community, frequent release cycle, and a company behind it. Of the various options in this article, Onsen is probably for you if you’re worried about long-term support, reliability, and tooling, while perhaps sacrificing a few features.
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.
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: ~1,300 stars
- License: MIT
- Documentation Quality: Thorough
- Documentation Language: English
- Design Spec Accuracy: Low
- Themes: Material, iOS, Custom - Automatic platform detection
- 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. However, it is developed by a single person, and support may drop at any time. Additionally, 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 also is developed primarily by a single person, but it sure doesn’t seem like it. It’s been around for a fairly long time, and has amassed quite a userbase.
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. 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: ~9,000 stars
- License: MIT
- Documentation Quality: Thorough
- Documentation Language: English
- 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/nolimits4web/framework7/
Conclusion (TL;DR)
Framework 7 is a proven framework that provides just about everything you need for a hybrid web app. It’s probably the best bet if your goal is to have the app appear entirely native to users, though that comes at the expense of customiseability and control.
(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 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.