#193: Vue.js 3.1.0-beta Migration Build now available! Vue Devtools new beta supports Vue 2.x and more!

May 10 · Issue #193 · View online

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

📖 Read the issue online

Go to news.vuejs.org.

Submit new stories at news.vuejs.org/submit.

News

Vue.js

@vuejs

3.1.0-beta (which includes the migration build) is out.

Changelog: https://t.co/nOq5aO1r6u

Migration build docs: https://t.co/MWcwVULIJn

11:21 PM - 8 May 2021

Guillaume Chau 🏠 Stay home

@Akryum

✨️ @vuejs devtools 6 beta 8 released! ✨️

Highlights:
- Vue 2 support!
- Plugin permissions
- New API methods
- Component persistent selection

Download for Firefox:
https://t.co/L2285wQKui

Download for Chrome:
https://t.co/fBtK401X2D

Read more:
https://t.co/ztdgsBF4QL

11:40 PM - 23 Apr 2021

tiptap – the headless WYSIWYG editor now supports Vue 3.0

www.tiptap.dev – Share

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.

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

enjoythevue.io – Share

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

theroadtoenterprise.com – Share

[SPONSORED] 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.

Articles

3 Years of VueJS (2021) – Anthony Sarkis

anthony-sarkis.medium.com – Share

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

www.youtube.com – Share

The Quasar Show continues with 2 new episodes!

This Dot Labs: Build Advanced Components in Vue 3 using $attrs – Simone Cuomo

labs.thisdot.co – Share

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 - Daniel Kelly

vueschool.io – Share

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() - Markus Oberlehner

markus.oberlehner.net – Share

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 – Josh Deltener

masteringnuxt.com – Share

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 – Andy Li

www.vuemastery.com – Share

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 – Ivan Sieder

simedia.tech – Share

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.

💚 Sponsors 💙

Vue.js Amsterdam

Vue – The Road To Enterprise

Storyblok

Resources

FormVueLate v3.x

formvuelate.js.org – Share

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

GitHub - privatenumber/vue-grep: Grep your Vue.js codebase with CSS selectors

github.com – Share

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: 🤲 Vue 2 fragment directive to return multiple root elements

github.com – Share

🤲 Vue 2 fragment directive to return multiple root elements

GitHub - FranckFreiburger/vue3-sfc-loader

github.com – Share

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

QCalendar

qcalendar.netlify.app – Share

Calendar Component for Quasar Framework

Did you enjoy this issue?

If you don't want these updates anymore, please unsubscribe here.

If you were forwarded this newsletter and you like it, you can subscribe here.

Powered by Revue

#193: Vue.js 3.1.0-beta Migration Build now available! Vue Devtools new beta supports Vue 2.x and more!

Older messages

#192: Vue 3.0 to drop IE 11 support (RFC); 2 days until Vueconf.us; Component testing in Cypress;

#191: State of Vue 2021, Vite v2 released; Vuex 5 RFC; Vuetify for Vue 3 in alpha and more!

#190: Vuex 4.0.0 is here! 🚀 New Vite docs and dedicated Discord sever; Vue Contributor days and more!

#189: Reflections for 2020-2021; Vue-Storefront raises $1.5M; Element UI for Vue 3.0 and more!

#188: Enjoy the Vuelidays! And a happy New Year! 🎉

You Might Also Like

Data Science Weekly - Issue 544

Develop highly relevant search applications using AI

Stripe makes more changes

💎 Issue 414 - From a Lorry Driver to Ruby on Rails Developer at 38

💻 Issue 414 - JavaScript Features That Most Developers Don’t Know

💻 Issue 407 - The Performance Impact of C++'s `final` Keyword

💻 Issue 414 - Everyone Has JavaScript, Right?

📱 Issue 408 - All web browsers on iOS are just Safari with different design

💧 Don't Bother Liquid Cooling Your AMD CPU — Why You Should Keep Using Live Photos on iPhone

💻 Issue 332 - 🥇The first framework that lets you visualize your React/NodeJS app 🤯