Tutorial

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

Published on February 26, 2017
author

Joshua Bemenderfer

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.

Last Updated on December 4th, 2017.

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; }

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
Joshua Bemenderfer

author

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Become a contributor for community

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

DigitalOcean Documentation

Full documentation for every DigitalOcean product.

Resources for startups and SMBs

The Wave has everything you need to know about building a business, from raising funding to marketing your product.

Get our newsletter

Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.

New accounts only. By submitting your email you agree to our Privacy Policy

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

Get started for free

Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

*This promotional offer applies to new accounts only.