#194: 🎉 Vue.js v3.1 "Pluto" Released! 🎉 New UI frameworks for Vue 3.0; Videos from VueConf.us 2021

June 14 · Issue #194 · View online

Hey there,

🐶 Great news – Vue v3.1 “Pluto” has been released! It comes with several performance improvements, minor breaking changes (no worries, those most likely don’t affect you), and lots of bug fixes!

There are also some additional, experimental features like CSS variable injection and “experimental setup”. You can read more about those features (and other changes in v3.1) here.

But likely the most important part is that the migration build is now stable. The migration build is a build of Vue 3 that runs in a backward compatibility mode mimicking Vue 2.x APIs. This allows you to replace Vue 2 while still keeping most of your code untouched. The migration guide has also been updated. Check it out!

Another great news – the Vue-Devtools will now support Vue apps running in an iframe!

As Vue 3 is getting more mature, the need fore UI component libraries raises. Here are some new contenders:

Finally, the recordings from VueConf.us are now available! Here are my favorites:

Component Testing with Vite, Vue, and Cypress by Jessica Sachs
The Vue 3 Composition API by Natalia Tepluchina
Component Library / Accessibility by Jonathan Bakebwa

Cheers,

— Damian Dulisz

📖 Read the issue online

Go to news.vuejs.org.

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

News

Release v3.1.0 Pluto · vuejs/vue-next · GitHub

github.com – Share

Vue.js v3.1 codename “Pluto” has been released! This is the migration built that you might have tried last month when it launched in beta.

Guide to using the Vue v3.1 Migration Build

v3.vuejs.org – Share

Read how to migrate your Vue 2.x apps into Vue 3 with the newly released Migration Build!

Guillaume Chau 💚 RIP IE

@Akryum

Small update to @vuejs devtools to add iframe support to Vue 2 apps

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

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

https://t.co/zdAewYqD03

1:56 PM - 9 Jun 2021

VueConf US 2021 | Vue Mastery

www.vuemastery.com – Share

Watch 7 videos from VueConf US 2021, which took place on April 14, 2020

NuxtJS

@nuxt_js

Introducing Nuxt Image ✨

✂️ Resize and transform
🚀 Made for performance
☑️ Standards compliant
🌈 Works with any image provider
👀 And much more...

https://t.co/YGEX4xgr4k https://t.co/8zYxuIxovM

2:44 PM - 28 May 2021

VueUse

@VueUse

Introducing VueUse v5.0 🎉

🧊 Renderless Components https://t.co/pZvCl8C6bg
⚛️ Electron Add-on https://t.co/2BH21bFxjO
🔨 VueUse Playground https://t.co/khDCJov5vL

🧾 v5.0 Release Notes https://t.co/BWAUMxHt6S https://t.co/0n4zAqIDoU

10:23 AM - 8 Jun 2021

HasuraCon’21: Building Applications with GraphQL and VueJS

hasura.io – Share

Natalia and Debbie are hosting a live topic table where they will discuss building applications with Vue & GraphQL. Come talk to them live!

Vue - The Road To Enterprise - SUMMER SALE

theroadtoenterprise.com – Share

[SPONSORED] Get 25% OFF and 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

What’s new in Vue 3.1? – Cédric Exbrayat

blog.ninja-squad.com – Share

It has already been 8 months since v3.0.0, and here is the first minor version. In the meantime, 11 patch releases landed mainly with bug fixes and performance improvements, but also with some features and changes.

Let’s catch up with everything that happened since v3.0.0!

Vue vs Svelte: Comparing Framework Internals – Andy Li

www.vuemastery.com – Share

In this tutorial, we’ll put the two frameworks, Vue and Svelte, side-by-side, and compare the different implementation approaches.

Refactoring to Vue 3 – Francisco Brusa

www.franciscobrusa.dev – Share

A really nicely written (and presented!) tutorial of refactoring a small feature from Vue’s options API into composition API.

Debugging Guide: Why Your Vue Component Isn't Updating (and how to fix it) - Michael Thiessen

michaelnthiessen.com – Share

If you’ve got a Vue component that won’t update the way you expect it to, this debugging guide will help you to quickly identify and fix the problem.

Pinia, an Alternative Vue.js Store – Daniel Kelly

vueschool.io – Share

Pinia is an up-and-coming alternative store solution for Vue.js. It boasts an intuitive API and all the features you expect from a Vue store.

SEO and Performance Optimisation with Nuxt Image – Thomas Findlay

theroadtoenterprise.com – Share

This article shows how to use Nuxt Image to optimize the app’s loading times and SEO performance. It showcases nuxt-img and nuxt-picture components and showcases how different configurations drastically improve and optimize large images.

Creating an internationalised site with Strapi and Nuxt – Gemma

www.pixelhop.io – Share

This post will show you the basics of creating an internationalized site using Strapi and Nuxt.js.

Mobile Detection With Nuxt SSR – Josh Deltener

masteringnuxt.com – Share

Learn a couple of ways to detect a user’s device with Nuxt SSR so you can streamline your server response and tailor the best experience for your users.

💚 Sponsors 💙

Vue.js Amsterdam

Vue – The Road To Enterprise

Storyblok

If you enjoy this newsletter, please consider supporting it. Thank you! 💚

Resources

Oruga UI

oruga.io – Share

Oruga is a lightweight library of UI components for Vue.js without CSS framework dependency.

It doesn’t depend on any specific style or CSS framework (like Bootstrap, Bulma, TailwindCSS, etc) and it doesn’t provide any grid system or CSS utility, it just offers a set of components easy to customize only modifying your stylesheets or integrating it with a CSS framework

Vuestic UI

vuestic.dev – Share

Vuestic UI is a components library for Vue 3.

It features more than 50 highly customisable components, forever free and Open Source. Vuestic Admin (https://github.com/epicmaxco/vuestic-admin) is a great example of a real-world web application based on Vuestic UI and is used to quickly bootstrap frontends of web applications.

Naive UI

www.naiveui.com – Share

Vue 3 Component Library. Fairly Complete. Customizable Themes. Uses TypeScript. Not too Slow.

GitHub - Aminerman/vue-kinesis

github.com – Share

Easily create complex interactive animations with Vue.js

vue3-discordpicker

en-zo.dev – Share

A new emoji | gif picker like Discord

GitHub - unjs/unctx

github.com – Share

🍦 Composition-api in vanilla js

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

#194: 🎉 Vue.js v3.1 "Pluto" Released! 🎉 New UI frameworks for Vue 3.0; Videos from VueConf.us 2021

Older messages

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

#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!

You Might Also Like

Quick question

Kotlin Weekly #404 (NOT FOUND)

📲 Why Is It Called Bluetooth? — Check Out This AI Text to Song Generator

Daily Coding Problem: Problem #1425 [Easy]

PD#571 Software Design Principles I Learned the Hard Way

When Procrastination is Productive & Ghost integrating with ActivityPub

C#503 Building pipelines with System.Threading.Channels

RD#453 Get your codebase ready for React 19

☁️ Azure Weekly #464 - 28th April 2024

Tesla profits tumble, Fisker flatlines, and California cities battle for control of AVs