If you are looking forward to building mobile apps with Vue.js, then you have many available UI frameworks to choose from. In this article, we will go through some of these Vue.js based frameworks which can be used in building multi device hybrid (Cordova or Phonegap) apps as well as Native apps.
In theory, you can use any web framework (or roll your own) that supports mobile browsers and make it work with Vue.js and Cordova. However, having a dedicated UI framework allows you choice of pre-built components and re-usable UI behaviors such as toggle buttons, floating actions buttons, swipe panes, tabs, scroll to refresh etc.
In this post, we will be sticking to frameworks that are integrated with Vue.js and offer building of mobile apps with Cordova. At the end, we have also mentioned a framework which allows you to build native apps with Vue.js. If you are just starting out, then these Vue.js tutorials will come in handy. Also take a look at these Vue.js dashboard templates in case you plan to build a web-app with admin panel.
Vue.js based Mobile App Frameworks
Listed below are frameworks that support or are closely integrated with Vue.js for building mobile apps. Note that some of these frameworks are still in their early stages of development, hence you may want to assess the community and support around a framework before making a choice.
If you want to develop mobile as well as desktop UI at once using the Bootstrap framework then MDB Vue can be your best choice. Based on the Google’s material design language which is optimized for mobile as well as desktop interfaces, MDB Vue brings the power of Bootstrap as well as Vue.js together.
Quasar Framework allows you to build hybrid mobile apps with near-native like user-interface and uses VueJS 2 at its core. It is a MIT-licensed open source project available on GitHub.
Quasar framework has good set of documentation available on its website and provides an extensive set of Vue based UI components such as sliders, spinners, tooltip, popover, model dialogs, context menu, video embedding and many more.
Getting started with Quasar is easy and it offers its own set of CLI, much like the Ionic framework for out of the box setup and previews. You can build both Cordova as well as Electron (cross platform desktop apps) with this framework.
You can check out the Quasar Play app on Android Play Store to have a feel of the framework in a real app.
Onsen UI for Vue 2 combines Vue.js with Onsen UI to create hybrid & mobile web apps. Check out Onsen samples to get a feel of its offerings and head over to the Onsen UI for Vue 2 page for more info on how to integrate Onsen with Vue.js.
Framework7 is another open source (MIT licensed) mobile HTML framework to develop hybrid mobile apps with iOS or Android native look and feel. While it does not support any other platform, you can build web apps using the Material look or the iOS look.
Framework7 offers a variety of native-like UI components and behaviours such as swipe actions, pull to refresh, dynamic navbar, page animations, virtual lists, searchbar etc. It offers support for Vue with its VueJS based starter app templates. These templates are available as Cordova+webpack template or simply as webpack or browserify templates.
To get a feel of the framework, check out some of the apps in their showcase.
Vuetify.js is a Component Framework for Vue.js 2 which utilizes Google’s Material Design patterns for the UI components. It comes with 3 Vue CLI templates pre-configured with Vuetify to help you get started with a Vue.js based web project.
Vuetify offers a wide range of Material Design components such as breadcrumbs, cards, dropdowns, navbar, sidebar, tabs etc. You can track the progress of this open source project on GitHub.
Keen UI is a collection of Material Design UI components written with Vue.js. It offers numerous Material style components such as for alert, autocomplete, FAB, popover, snackbar, tabs etc. The project is available on GitHub and is MIT Licensed.
Mint UI provides CSS and JS components for building mobile applications such as toast, date-time picker, lazy load, progress bar, action sheet and more. Thanks to the efficient component-based approach of Vue.js, Mint UI is pretty light-weight too. You can find this MIT licensed project on GitHub.
Bootstrap Vue offers Bootstrap 4 based components For Vue.js 2. While many of the components are still under development, it already offers components such as breadcrumbs, dropdown, navbar, pagination etc.
Vue Material is a lightweight framework built according to the Material Design specs to help you build responsive web apps. It offers many material design based components such as cards, chip, snackbar, switch, tabbar etc. This library aims to deliver components using the same API as offered by Angular Material.
Vue-Blu is a UI Component Library based on Vue.js 2.x and Bulma CSS framework. While the documentation is mostly available in Chinese, the library offers navigation, view and form components. Check out their GitHub repo for more details.
Vue.js based Native App Development Framework
You may already be familiar with React Native by Facebook which allows you to build native iOS and Android apps using React. Weex is a similar framework by the Alibaba group, which works with Vue.js and allows you to build cross-platform native mobile apps.
While still in development, Weex is a promising framework and already in use by many companies. You can keep yourself up-to-date with the project on GitHub which is Apache 2.0 licensed.
Vue.js based Desktop UI Library
While Element is a desktop UI library based on Vue 2.0, we think it is relavant to be mentioned in this article. It offers many components suitable for writing a desktop web application. They are from the same team which offers Mint UI (covered earlier in this post). Element is a good choice if you are building Vue.js based app using Electron.
Hybrid or Native App
If you are still deciding whether to build a native app or a hybrid app, then there is a nice infographic which can help you choose between different app development models. If you do decide to go with the hybrid app approach using Cordova, Phonegap or Capacitor along with Vue.js then take a look at this tutorial for a good starting point.
Which framework, in your opinion, is best for building apps with Vue.js? If you are using Vue.js already in your mobile apps and have a favorite mobile framework then do share with us in the comments below.