Best Mobile Components for Progressive Web Apps in VueJs
In 2015, designer Frances Berriman and Google Chrome engineer Alex Russell coined the term “Progressive Web Apps” to describe apps taking advantage of new features supported by modern browsers that let users upgrade web apps to progressive web applications in their native operating system (OS). They’re reliable, fast, and engaging. In short, it’s a push to bring native power to the web. Nowdays, PWA has growing bigger, here’s the showcase of website that using PWA, you may check here.
Recently in Google IO 2017, Addy Osmani (Engineering Manager at Google working on Chrome & Web Platform) talked about pwa in many javascript framework include vuejs.
Two month before Google IO, Addy Osmani has sent issue to vuejs official repository to proposed about vue pwa official template for vue-cli, then Evan You as an author of vuejs agreed with Addy’s proposed. So, after Google IO, exactly at 1 June 2017 Addy released pwa template in vue-cli. Now you can create pwa project by type command in your terminal like this.
$ vue init pwa <yourProjectName>The template was so powerful, it was included service worker precaching of application shell + static assets (prod), script (async chunk) preloading using <link rel="preload">, web application manifest + favicons, mobile-friendly meta-viewport, and lighthouse score of 90+/100. But it doesn’t come with built-in components, so in this post I will suggest some of mobile components to speed up your UI development in vuejs progressive web apps. Here’s the lists of mobile component to create PWA in vuejs.
- Vuetify
Vuetify.js is a semantic component framework for Vue.js 2. It aims to provide clean, semantic and reusable components that make building your application a breeze. Vuetify.js uses Google’s Material Design design pattern, taking cues from other popular frameworks such as Materialize.css, Material Design Lite, Semantic UI and Bootstrap 4. Vuetify.js comes with good documentation and full support component, it’s very easy to learn.
2. Mint UI
Based in iOS style, mint UI is pretty light-weight. When all imported, the compressed code takes only ~30kb (JS + CSS) gzip space. Mint UI comes with small size and full support component, but the documentation is so hard to understand, because it’s too simple and some of docs was cut off. Last, although mint UI has english language support in the documentation, but in the live example still using chinese language, so bad.
3. Vue Material
Vue Material is lightweight framework built exactly according to the Material Design specs. Build powerful and well-designed web apps that can can fit on every screen. Vue material has similarity with angular material components, if you ever used angular material you can easily switch.
4. Keen UI
Keen UI is designed to be a lightweight Vue.js UI library with a simple API. Keen UI is inspired by Google’s Material Design, but Keen UI is not a CSS framework, and as such you won’t find a grid system or styles for typography in it. Instead, the focus is on creating reusable components that have interactivity.
5. Vum
Vum is an UI Framework build with Vue.js for mobile webapp. Vum has feature, full page structure(header, content, footer), bunch of powerful components, easy to use and extend, and high performance CSS3 animation. Vum is iOS design based like mint UI, but vum has less components than mint UI.
Conclusion, Vuetify is the most complete and powerfull components for vuejs apps, comes with good documentation, and the last it also has integration with NUXT for building server side rendering project. So I will put vuetify as my first priority. But, if you wanna choose simplicity you should consider Mint UI or Keen UI as your choice. If you prefer android based design, you may choose Vuetify, and if you prefer to use iOS based design you should go to Mint UI.
