← Go back

169Friday, December 13, 2019
First talk from VueConfTO published; posva/pinia: the Experimental state-management and more!

Hello Vuers,

any plans for the weekend? Or still standing in line for holiday gifts? If its the latter, here you have something to read on while waiting.

First of all, the first talk from VueConf Toronto has been published Design Principles of Vue 3.0 by Evan You. Check it out!

Speaking of Evan, he recently wrote down an explanation of how the vue-loader works dedicated to people interested in getting involved in the project. But if you are just curious of how it works, you can still take a look.

Also, Eduardo With Many Names aka Posva has released an experimental state-management library for Vue 3.0 called Pinia. It shows how state management libraries could potentially be used with the Composition-API. It even integrates with the current Vue Dev Tools. It’s pretty ridiculous how little code you need with the Composition-APIs to build something like this.

You can already try it out with the official composition-api plugin for Vue 2.x.

Have an awesome weekend,

Damian Dulisz


Stories

Design Principles of Vue 3.0

Watch Evan You presenting some of the design principles behind the upcoming Vue 3.0 release.

vue-loader: 📦 webpack loader for Vue.js components – explained

Vue-loader is the webpack loader responsible for transforming our favorite .vue single-file components into something that is understandable by the browser. If you have been wondering how it works underneath, this explanation might give you a better idea.

Release v3.2.0 · logaretm/vee-validate · GitHub

Two new features for Vee-validate along with several fixes. Great job Abdelrahman! Check out the release notes.

This Month in Vue - November 2019

As you have probably noticed, the Vue.js News podcast is now released on a monthly cycle along with an article that sums up the most interesting news and stories from the past month. Here it is for November. Check it out!

How to reuse one Vue.js codebase across multiple apps

Thomas Holland returns with another article on Vue.js app architecture. I loved his previous article on Domain-driven development and this week he speaks about code re-usability but not in just one app, but multiple of those.

#30: Access template refs in Composition API in Vue.js 3

Quick tip on how to access the old this.$refs by using ref() in the new Composition API in Vue.js 3 components.

Portal - a new feature in Vue 3

Have you played the Portal game. There’s a similar concept for web frameworks, where you are able to teleport a component to a different location in the DOM? This is especially useful for modals (so it’s easier to manage things like z-index). Did you know we will likely get those in Vue 3.0 built-in? But until then, check out the portal-vue library.

Vue-router — props — 1/2

Here’s a short article with a few useful tips to working with Vue-router and component props. Did you know – for example – that you can automatically transform things like this.$route.params.id into an id prop? Read the article to learn how!


Libraries

GitHub - posva/pinia

https://github.com/posva/pinia

🍍Automatically Typed, Modular and lightweight Store for Vue using the composition api with DevTools support

Tournant UI

https://ui.tournant.dev/

*In the kitchen, the tournant is the person moving around, helping out. Tournant UI aims to be this. For User Interfaces. Tournant UI will not replace your complete UI or dictate how to you design your elements. But if you need to integrate inclusive components in your site, Tournant UI will be there. Like a helping hand.*

GitHub - ProticM/vue-gridmultiselect

https://github.com/ProticM/vue-gridmultiselect

Simple multi-select component with items displayed in a table like UI

GitHub - codecept-js/vue-cli-plugin-codeceptjs-puppeteer

https://github.com/codecept-js/vue-cli-plugin-codeceptjs-puppeteer

CodeceptJS plugin for Vue CLI. [Demo](https://twitter.com/CodeceptJS/status/1204724860653637633)