178Sunday, March 29, 2020
Wikimedia adopting Vue! 🎉 New Vue online meetup initiatives and more videos from VueConf.us and Vue.js Amsterdam

Hello,

Do you know this website called Wikipedia? Where you can read about things? Like an online encyclopedia of sorts, but everyone can contribute? 🙃 It’s maintained by the good people from Wikimedia as well as volunteers and a few days ago the decision has been made for Wikimedia to adopt Vue! Does it mean Wikipedia will now become a Vue SPA – 99,9% not! But it means some parts of Wikipedia and other Wikimedia projects might be using Vue to enhance some of the more complicated, interactive elements. Like the page editor for example. If you’ve been wondering why Vue is called the "progressive framework" this use-case explains it pretty well I think.

As most conferences and meetups get canceled due to the pandemic, many organisers are embracing online events. You can watch the #1 Vue.js Amsterdam Virtual Meetup here. Additionally, a new initiative has been born, largely thanks to Maria Lamardo in the form of Vue Global Meetup that aims to help collaborate different Vue communities around the world to broadcast online meetups. The first of such will happen on the 14th of April. Sign up here if you would like to participate!

Speaking of events – there are several new videos from Vue.js Amsterdam! Vue Mastery has also started publishing talks from the recent VueConf.us.

Stay safe, Damian Dulisz


Stories

Vue Global Meetup, Tue, Apr 14, 2020 at 5:00 PM

Vue Global Meetup aims to help collaborate different Vue communities around the world to broadcast online meetups. The first of such will happen on the 14th of April. Sign up if you would like to participate!

New Async Component API by yyx990803 · vuejs/rfcs · Vue 3.0

Check out the proposal for the new syntax for creating async (aka lazy) components in Vue 3.0.

Redesigning Navigation failures and global handlers by posva · vuejs/rfcs · Vue-Router

Eduardo aka Posva is looking for your feedback on some further changes in Vue-Router.

Vue 3.0 Changes for @Component decorator and Vue base class · vuejs/vue-class-component

Despite dropping the built-in class syntax for Vue 3.0, we will still support it thanks to the vue-class-component plugin. Read this to learn a bit more on how the library is evolving to work with the new version of Vue.

Release v0.5.0 · vuejs/composition-api · GitHub

Along with several smaller fixes the new version of the composition-api plugin comes with watchEffect – a way to re-run functions when it’s dependencies change.

VueConf US 2020 – Vue Mastery

Watch 3 videos from VueConf US 2020, which took place in Austin, TX, USA on March 2-4, 2020

Vue.js Amsterdam Virtual Meetup #1

Watch the Vue.js Amsterdam Virtual Meetup #1 with: Eduardo San Martin Morote, Roman Kuba, Debbie O'Brien and Pooya Parsa!

Vue.js Amsterdam 2020 Videos

New videos from the conference those of including Sarah Drasner, Natalia Tepluhina, Damian Dulisz, Sébastien Chopin and of course Evan You.

Vue.js Headless Component

A renderless component (or like in this case called "headless components") is a powerful pattern that utilizes scoped slots to encapsulate functionality while not pushing for any specific UI solutions. Definitely something to be picked up by every Vue developer. At least until composition-api becomes widely available.

Vue.js Functional Components

Another article by Frederik Dietz, this time about functional components. A great technique to know, though keep in mind that the template-first approach to functional components will be obsolete in Vue 3.0. You might want to focus on learning how to use functional components with JSX though!

Cut Your Nuxt.js generate Build Time in Half with context.payload

Markus Oberlehner is back with another great article on using the context.payload param in your asyncData. This especially important if you are using the "static generator" functionality of Nuxt along with dynamic routes. Combining those functions allows you to preload the data that would normally be loaded inside asyncData during build step.

Vue.js and dialogs

Here’s an interesting approach to handling modals or dialogs in Vue. The approach differs from the typical props in / events out pattern and instead suggests you treat the dialog as a promise that can be either resolved or rejected depending on the user choice.

Build A Drawing App with Vuejs and Html5 Canvas

In this tutorial, we will be building a simple drawing app with Vue.js and Html5 Canvas.

How Storefront UI solves website accessibility issues with custom directives

A Storefront UI developer describes how custom Vue.js directives were used to solve accessibility issues for websites.

Understanding Vue's Deep CSS Selector

Learn how to use the Deep selector in Vue, a powerful tool for resolving certain CSS issues.


Libraries

GitHub - alvarosaburido/vue-dynamic-forms

https://github.com/alvarosaburido/vue-dynamic-forms

Easy way to dynamically create reactive forms in vue based on a varying business object model