149Tuesday, July 16, 2019How to create Typeform-like forms in Vue; How to use Vue Function API today; Introduction to slots in Vue and more!
this week has been pretty calm in terms of news, but definitely not when it comes to interesting articles and tutorials. One of my fav authors – Krutie Patel is now blogging for Vue Mastery and has just published her new article on building Typeform-like forms with Vue. Great read!
Although the Vue Function API is still under consideration as a part of the RFC process, it has already picked up in the community thanks to the vue-function-api library, which allows you to use it in your current Vue 2.x apps. There’s a great article by Albert Brand on how to use it to fetch data with ease thanks to a utility library he wrote on top of the function API.
Release @quasar/extras-v1.2.0 · quasarframework/quasar · GitHub
If you’re a Quasar user you might want to know that the extras module that includes a large set of icons has been released!
Building an interactive and distraction-free form with Vue
Here’s an amazing article by one of my favourite authors – Krutie Patel. This time, she’s showing how to build a Typeform-like (one at a time, distraction free), schema generated form that is not only pleasant to fill but also animates nicely between the inputs! Amazing read!
3 Anti-Patterns to avoid in Vue.js
Here’s a list of 3 things you probably shouldn’t be doing when using Vue. Those include: side-effects in computed properties, mutating of nested properties of props and accessing parent component instances directly in your child components.
Lazy loading and code splitting in Vue.js
Filip Rakowski – a good friend of mine and the co-founder of Vue Storefront is sharing several tips that they are using within Vue-Storefront to improve the overall application performance by making use of lazy loading of components and code splitting.
Using Slots In Vue.js
If you have been looking for a really smooth introduction to using slots in your Vue components – here’s a great place to start (outside of the official docs of course).
Next-generation async functions with Vue Async Function
Even though the Vue Function API isn’t here yet, the community has already started picking it up thanks to the vue-function-api library that allows you to use it before it ships in Vue 3.0. Here’s a great article that explores how it can be used to build async functions for data fetching inspired by React-Async.
The Way of the Fox: The Vue Vixens Curriculum
Knowing something and being able to teach it are two quite different things. There are, however, methods that you can learn to improve your teaching skills. In this article, Jen Looper shares some of the techniques that they are using within the Vue Vixens initiative.
Building Vue.js UI Components With HTML Semantics in Mind
When building UI components it’s important to keep in mind that the HTML elements that we’re using have a semantic meaning, which goes beyond just their default behavior – it’s also important from the accessibility perspective. In this article, Markus explains how to build components where you can control which HTML elements they will render to.
Vue.js Advanced Reactivity API and Caching Method-style Getters
Method-style getters are getters that return a function which you can call to get some specific resources out of your Vuex store. Here’s an example in the Vuex docs. However, the result of that function won’t be cached. But what if that could be changed? Read this article by Michael Gallagher to see how that’s possible.
GitHub - AlbertBrand/vue-async-function
Vue.js async function helper for the Vue Function API
GitHub - ajerez/vue-mobile-detection
Vue.js prototype function `this.$isMobile()` that returns a Boolean value depending on whether or not the user is browsing with a mobile
GitHub - shwilliam/vue-direction
👋 Declarative direction aware hover in Vuejs
GitHub - claudiolcastro/vue-fake-input
Custom input for individual characters