Best components for PWA in Vue.js

List of past solutions for Progressive Web Apps development in Vue.Js
Sergey Siminskiy's picture
Sergey Siminskiy
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.

How to set "check" to a checkbox in jQuery?

Small jQuery tutorial on common issue with code examples
Sergey Siminskiy's picture
Sergey Siminskiy
21 August

Let's consider three options for different versions of jQuery.

jQuery 1.6+

Use the new .prop() method:

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

jQuery 1.5.x and below

The .prop() method is not available, so you need to use .attr().

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

Note that this is the approach used by jQuery's unit tests prior to version 1.6 and is preferable to using

$('.myCheckbox').removeAttr('checked');

since the latter will, if the box was initially checked, change the behaviour of a call to .reset() on any form that contains it - a subtle but probably unwelcome behaviour change.

Any version of jQuery

If you're working with just one element, you can always just modify the HTMLInputElement's .checked property:

$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;

The benefit to using the .prop() and .attr() methods instead of this is that they will operate on all matched elements.