Best components for PWA in Vue.js

List of past solutions for Progressive Web Apps development in Vue.Js
09 August

Progressive Web Apps (PWA) was announced by Google in 2015. This format of creating mobile websites attracted attention due to the relative ease of development and almost instantaneous interaction with the user. As early as May 2016, at the Google I / O Developer Conference, The Washington Post demonstrated its mobile hybrid site-application.

PWA is a new and powerful feature in webdevelopment. We've made a research and found out what are the best components for Vue.js PWA.

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.

Mint UI

Mint UI is  light-weight Mobile UI elements for Vue.js. When all imported, the compressed code takes only ~30kb (JS + CSS) gzip space. But the documentation is weak side of this app. Also, live examples are in Chinese language.

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.

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.

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.

What is Puppeteer?

Short overview of Chrome team developed Node library which provides a high-level API to control headless Chrome over the DevTools Protocol
17 October

Puppeteer is a Node library which provides a high-level API to control headless Chrome over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome.

What can it do? 

Most things that you can do manually in the browser can be done using Puppeteer! Here are a few examples to get you started:

  • Generate screenshots and PDFs of pages.
  • Crawl a SPA and generate pre-rendered content (i.e. "SSR").
  • Scrape content from websites.
  • Automate form submission, UI testing, keyboard input, etc.
  • Create an up-to-date, automated testing environment. Run your tests directly in the latest version of Chrome using the latest JavaScript and browser features.
  • Capture a timeline trace of your site to help diagnose performance issues. 

The goals of the project are simple:

  • Provide a slim, canonical library that highlights the capabilities of the DevTools Protocol.
  • Provide a reference implementation for similar testing libraries. Eventually, these other frameworks could adopt Puppeteer as their foundational layer.
  • Grow the adoption of headless/automated browser testing.
  • Help dogfood new DevTools Protocol features...and catch bugs!
  • Learn more about the pain points of automated browser testing and help fill those gaps.

Project is maintained by Chrome DevTools team. Learn more at GitHub and try it out on official website.