117Tuesday, October 30, 2018Vue-Hooks anyone? Atomic Design for Vue components; Validation Providers and more!
Hello! Recently there’s a lot of buzz around Hooks – a new experimental addition to React, introduced by Dan Abramov a few days ago. Evan being Evan jumped right in on the idea and created Vue-Hooks – a library that implements hooks for Vue in less than 100 lines of code. So what are hooks exactly? It’s an alternative pattern to solve the code-sharing/reusability problem that is usually solved with mixins, higher-order components or render props (think scoped slots or renderless components). Hooks should help you extract shared logic that you wouldn’t be able to easily extract otherwise. If you ask me, hooks might become the go-to solution for working with different kinds of API calls and integrating services like real-time databases or chats. Maybe a new Apollo integration? Time will tell.
— Damian Dulisz
P.S. Keep in mind the Vue-Hooks library is totally not production ready!
Stories
99.5: Sébastien Chopin - Building Universal Vue.js Apps with Nuxt.js
In this episode Adam Wathan talks to Sébastien Chopin about Nuxt.js. How it all started, how it works and what the future holds for the framework.
Release 🚀 Release 1.0.0 · posva/vue-promised · GitHub
Vue-Promised is a great library by Eduardo San Martin Morote aka Posva, that let’s you solve the popular problem of how to handle displaying components when the data is still being fetched. Thanks to Vue-Promised, you can easily show a different component when the API request is still underway, when it completes and also when it fails. Used as a component with a set of slots. No need for special flags just to show a spinner.
Build a progressive web app using Vue CLI 3
Here’s a neat tutorial that shows how to build a simple PWA using the Vue-CLI 3 PWA plugin. The tutorial covers most of the basics like configuring the workbox plugin as well as how to make use of notifications and push notifications.
VeeValidate 2.1: Validation Providers
A very interesting article that covers how the new addition to VeeValidate, namely Validation Components. It’s an interesting idea that makes ti possible to use components with scoped-slots to provide your form with customised validation rules and more!
Vue CLI 3.0 plugin for creating apps using Atomic Design & Storybook
Atomic Design is a popular methodology for creating design systems. Those can also be applied to components and in this article, Milad Alizadeh shows how to do just that by using to a new Vue CLI 3.0 plugin that he created. Great read!
Extending Vuetify Form Field Validation
A short tutorial on how to extend the possibilities of the built in validation in Vuetify. In this example, we want to restore the default values fetched from the API if the user chooses to clear the input.
Libraries
GitHub - yyx990803/vue-hooks
Experimental React hooks implementation in Vue.
GitHub - milad-alizadeh/vue-cli-plugin-atomic-design-components
Vue CLI 3 plugin for adding a very basic UI library of components based on Atomic Design methodology
GitHub - swisnl/vue-cli-plugin-svg-sprite
Vue CLI 3 plugin to build a SVG sprite.