193Monday, May 10, 2021
Vue.js 3.1.0-beta Migration Build now available! Vue Devtools new beta supports Vue 2.x and more!

Hi everyone,

Great news! Vue v3.1.0-beta has been released with a set of new features and bug fixes, including the onServerPrefetch lifecycle hook!

But that’s not all, because v3.1 comes with the thing we all have been looking forward to for months. The Vue 2 to 3 Migration Build! It allows you to run Vue 3 and the SFC compiler in a backward compatible mode so you can work through the deprecations/breaking-changes 1 by 1, instead of having to rewrite the whole app at once.

If you are wondering how viable it is in a real-life, production application – I’ve tried it on a pretty large one (1k+ components) and managed to make it run and be partially functional within less than 2 hours. I’m convinced that I should be able to fully stabilize it within a few days. Wish me luck! 🤞

Also, the new beta for Vue-Devtools v6 now supports Vue 2.x. No need to toggle different extension versions when switching projects.

By the way, did you know that Vue was used in the mission during the Mars 2020 Helicopter mission? Well, now you do! And if you contributed, you should have a fancy badge on GitHub.

Lastly, my favorite WYSIWYG editor – tiptap – is now supporting Vue 3 with their new v2.0 beta release. Now rewritten in TypeScript.

Have a great week,

Damian Dulisz


Stories

tiptap – the headless WYSIWYG editor now supports Vue 3.0

tiptap is the most popular text editor library for Vue. Version 2 is a complete re-write in TypeScript and comes finally with support for Vue 3.

#58: What’s New in Vue 3 Ecosystem: Introducing Vite 2 with Evan You

Some exciting changes have been happening with Vite 2, and here to walk us through them is Evan You, creator of Vue.js. In this jam-packed episode, Evan talks about the decision to make Vite 2 a framework-agnostic build tool. We hear about what went into this, and Evan unpacks some of the features that come with this development.

Vue - The Road To Enterprise

Vue - The Road To Enterprise

Become Production-Ready with Vue 2 & 3 by mastering advanced patterns, best practices, and cutting-edge techniques for the development of blazing-fast Vue applications. In addition, grab 3 videos:

  • Learn Composition API by converting a Vue app from Options API.
  • Explore Compound Components Pattern and learn how to compose and build flexible components
  • Write cleaner and better code by using modern JavaScript features.

From Thomas Findlay, the 5-star rated mentor.

3 Years of VueJS (2021)

Have you ever wondered what a complex vue js application really looks like?

Today I’m happy to take a deep dive into the architecture of Diffgram’s Open Annotation UI. This is intended for people who are curious about VueJS at scale.

The Quasar Show - Episode 2 & 3

The Quasar Show continues with 2 new episodes!

Build Advanced Components in Vue 3 using $attrs

In this article, we are going to cover the $attrs attribute. We will explain what it is used for, how its implementation differs from Vue 2's (former $attrs, class, @listener), and build a code example to help understand its power.

Extending Vue Router Links in Vue 3

Easily handle both internal and external links in Vue 3 by wrapping the router link component in your own custom AppLink component.

Vue 3 Composition API: ref() vs. reactive()

Learn when to use ref() and when to use reactive() and why you should consider always using ref() instead of reactive().

Problems With Server-Side Plugins in Nuxt.js

In this article, Josh Deltener explains one of the gotchas when writing server-side rendered apps. Though he mentions plugins, the reality is, everything that you declare as global (outside of the function scope) will most likely persist on the server and can leak to other users. You can read more about this behavior on Vue’s SSR docs.

Refactoring Vuex with Map Helpers and Modules

Learn how map helpers and modules can make your Vuex code more organized, scalable and readable

Show / hide password input values with Vue.js 3 and the Composition API

It's common to have the possibility to toggle the visibility of a password field on websites, applications etc. Implementing such a functionality with Vue.js 3 and the Composition API is simple and straight forward.


Libraries

FormVueLate v3.x

https://formvuelate.js.org/

*Vue Schema-Driven Form Generation. Complete rewrite, faster, no unnecessary rerendering*

GitHub - privatenumber/vue-grep

https://github.com/privatenumber/vue-grep

*vue-grep is a command-line tool that lets you search your Vue.js codebase using CSS selector syntax (like querySelectorAll or jQuery) — essential for navigating large codebases! 🔥*

GitHub - privatenumber/vue-frag

https://github.com/privatenumber/vue-frag

🤲 Vue 2 fragment directive to return multiple root elements

GitHub - FranckFreiburger/vue3-sfc-loader

https://github.com/FranckFreiburger/vue3-sfc-loader

It allows you to load .vue files dynamically at runtime from your html/js. No node.js environment, no build step needed.

QCalendar

https://qcalendar.netlify.app/

Calendar Component for Quasar Framework