---
title: "Vue.js 3.1 released"
publication: "JavaScript Weekly"
issue: 542
published_at: "2021-06-11"
canonical_url: "https://javascriptweekly.com/issues/542"
---

Plus Chrome's new memory inspector tool, private fields, and a fun chess game. |        

#​542 — June 11, 2021 

[Unsubscribe](https://javascriptweekly.com/leave/*|UID|*)|[Read on the Web](https://javascriptweekly.com/issues/542)   

JavaScript Weekly 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/nk7ji6gs1qbeyekjuuys.jpg)](https://astro.build/blog/introducing-astro)  

[Introducing Astro: Ship (Even) Less JavaScript](https://astro.build/blog/introducing-astro) — From the creator of [Snowpack](https://www.snowpack.dev/) and [Skypack](https://www.skypack.dev/) comes **a new 'bring your own framework' static site builder** where the site is rendered to static HTML and only loads JavaScript as-needed using an “islands architecture” to allow partial hydration. It's always fun to see these folks experimenting with how we approach problems. Keen to learn more? [This 50 minute talk + live demo](https://www.youtube.com/watch?v=mgkwZqVkrwo) helps _a lot._ 

Fred K. Schott   

[The Plan for React 18](https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html) — The React team has outlined some exciting things on the roadmap for React 18 (due in its final form in _'several months' time'_): 

- Cassidy Williams has written [an accessible 'Now what?' introduction](https://dev.to/cassidoo/react-18-alpha-is-out-now-what-2apj).
- The [first alpha of React 18 is available](https://github.com/reactwg/react-18/discussions/9) – it's _not_ for production use.
- A new Suspense-based [server side rendering architecture](https://github.com/reactwg/react-18/discussions/37).
- A [Transitions API](https://github.com/reactwg/react-18/discussions/41) for keeping an app responsive even during large updates.
- The launch of a [React 18 Working Group](https://github.com/reactwg/react-18) to enable invited members of the community to interact with the React team more directly through [these public discussions](https://github.com/reactwg/react-18/discussions). 

The React Core Team   [![\](https://copm.s3.amazonaws.com/aa4557c9.jpg)](https://frontendmasters.com/courses/intermediate-react-v3/?utm_source=javascriptweekly&utm_medium=email&utm_campaign=reactv3) 

[Learn to Build Scalable React Apps](https://frontendmasters.com/courses/intermediate-react-v3/?utm_source=javascriptweekly&utm_medium=email&utm_campaign=reactv3) — Brian Holt covers the latest tools in the React ecosystem like TypeScript, TailwindCSS, Redux, Jest, and more in this new and updated video course! 

Frontend Masters sponsor    

[Introducing Chrome's New _Memory Inspector_](https://developer.chrome.com/blog/memory-inspector/) — Landing in Chrome 91’s DevTools is the new _memory inspector_ with which you can inspect your ArrayBuffer, TypedArray, DataView, and even WebAssembly Memory. 

Kim-Anh Tran (Google)   

[Vue.js 3.1.0 (Pluto) Released](https://github.com/vuejs/vue-next/releases/tag/v3.1.0) — There’s now the [migration build](https://v3.vuejs.org/guide/migration/migration-build.html), a build of Vue 3 that offers Vue 2 compatible behavior to help with Vue 2 to 3 migrations. Cédric Exbrayat rounds up some [other 3.1 additions here](https://blog.ninja-squad.com/2021/06/07/what-is-new-vue-3.1/). 

Vue.js Team     

Quick Bits 

- There's a [new Visual Studio Code release](https://code.visualstudio.com/updates/v1_57) — the JavaScript debugger now integrates with the Microsoft Edge DevTools to provide a DOM, style, and network inspector.
- If you build extensions for Chrome, you'll want to check out [the new `chrome.scripting` API.](https://developer.chrome.com/en/blog/crx-scripting-api/)
- The Playwright project has introduced [Playwright Test](https://github.com/microsoft/playwright/releases/tag/v1.12.0), a new test runner for parallel multi-browser tests. [Playwright Trace Viewer](https://playwright.dev/docs/next/trace-viewer/) can then let you explore recorded test traces later on. 

Releases 

[use-sound 4.0](https://github.com/joshwcomeau/use-sound) — React hook for sound effects.
 [Cypress 7.5.0](https://github.com/cypress-io/cypress/releases/tag/v7.5.0) — Testing system.
 [Ghost 4.7.0](https://github.com/TryGhost/Ghost/releases/tag/v4.7.0) — Headless Node.js CMS / blogging system.
 [QUnit 2.16.0](https://github.com/qunitjs/qunit/releases/tag/2.16.0) — Easy JavaScript testing framework.
 [Plotly.js 2.0](https://community.plotly.com/t/announcing-plotly-js-2-0/53675)    

💻 Jobs  

[Frontend Developer at MIT (Remote, Contract to Full-Time)](https://www.linkedin.com/jobs/view/2572498097) — Are you a frontend developer with React and UX skills? Join our team at MIT building a new platform for the energy industry. 
MIT Energy Initiative   

[JavaScript Engineer](https://www.stickermule.com/career/7e6bb5ee-9953-4d46-b008-77a3bbc4ee29) — Join our "kick ass" team. Our software team operates from 17 countries and we're always looking for more exceptional engineers. 
Sticker Mule   

[Find Software Engineering Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-javascriptweekly%29&utm_content=find-your-next-job) — Take 5 minutes to build your free profile & start getting interviews for your next job. Companies on Hired are actively hiring right now. 
Hired    

📖 Articles, Opinions & Tutorials  

[Implementing Private Fields for JavaScript](https://hacks.mozilla.org/2021/06/implementing-private-fields-for-javascript/) — Although you might be using them already via Babel or TypeScript, private fields are a feature being added to JavaScript directly through the TC39 proposal process. 

Matthew Gaudet   

[Creating a Serverless Function to Scrape Web Page Metadata](https://mmazzarolo.com/blog/2021-06-06-metascraper-serverless-function/) — [Metascraper](https://metascraper.js.org/#/) is a Node.js package for scraping metadata from live web pages and this tutorial demonstrates its use via a Vercel hosted function. 

Matteo Mazzarolo   

[[Free Download\] Guide to Effective Feature Management](https://learn.launchdarkly.com/effective-feature-management/?utm_source=cooperpress&utm_medium=display&utm_campaign=q4-cooperpress&utm_content=ebook_oreilly_efm) — Learn feature management practices to accelerate release cycles and deploy every 6 hours, instead of every 6 weeks. 

LaunchDarkly sponsor   

▶[Exploring Deno Land 🦕 with Ryan Dahl](https://changelog.com/podcast/443) — Ryan Dahl, the original creator of Node.js and now creator of the [Deno](https://deno.land/) runtime, went on the popular Changelog podcast to talk about how the success of Node changed his life and what led him to creating Deno. 

The Changelog Podcast podcast   

[Managing Shared State in Vue 3](https://www.smashingmagazine.com/2021/06/managing-shared-state-vue3/) — Writing large-scale Vue applications can be a challenge. In this article, Shawn Wildermuth dives into the pros and cons of approaches like factories, shared objects, and using Vuex. He also explains what is coming in Vuex 5.0 that might change how we all use shared state in Vue 3. 

Shawn Wildermuth   

[Rust from a JavaScript Perspective: A Tongue-in-Cheek Tour](https://blogs.harvard.edu/kapolos/rust-from-a-javascript-perspective/) — _“I am documenting – albeit in a bit funny way – some thoughts in my journey so far in Rust land, coming from the viewpoint of a hardcore JavaScript enthusiast.”_ 

kapolos   

[Why Tracing Might Replace (Almost) All Logging](https://go.lightstep.com/register-tracing-will-replace-logging-guide-co21?utm_campaign=js&utm_source=cooper&utm_medium=Email) 

Lightstep sponsor   

[How To Build a Geocoding App with Vue.js and Mapbox](https://www.smashingmagazine.com/2021/06/building-geocoding-app-vue-mapbox/) 
Prince Chukwudire   

[Ten Tips for Building More Accessible Angular Apps](https://blog.angular.io/build-more-accessible-angular-apps-1aca4fc39aff) 
Emma Twersky (Google)   

[Don't Use Functions As Callbacks Unless They're Designed for It](https://jakearchibald.com/2021/function-callback-risks/) 
Jake Archibald     

🛠 Code & Tools   

supported by [![Okta\](https://res.cloudinary.com/cpress/image/upload/v1602154330/de7dtktheistsfpqdem4.png)](https://developer.okta.com/?utm_campaign=newsletter_cooperpress_all_multiple_inc_dev_sponsored-section_null&utm_source=cooperpress&utm_medium=cpc)    

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/i8ry02ovpt8jc8rsstvj.jpg)](https://handsfree.js.org/)   

[Handsfree.JS: Bring Face, Hand or Pose Tracking to Your Frontend Apps](https://handsfree.js.org/) — Track up to four hands at once (more than I’ve got, at least), 21 ‘landmarks’ for a single hand, or even faces and bodies in detail. I’m also digging the rather retro homepage. [GitHub repo](https://github.com/midiblocks/handsfree). 

Oz Ramos   

[Mocha 9.0 Released: The Popular JavaScript Test Framework](https://github.com/mochajs/mocha) — Mocha has been a popular go-to test framework for both Node and the browser for years. [9.0](https://github.com/mochajs/mocha/releases/tag/v9.0.0) drops Node 10.x support and is going ‘ES modules first’ by using ESM `import` rather than CommonJS `require` to load test files by default. 

Mocha   

[Flicking 4.0: A Carousel Component with 30M Daily Users](https://github.com/naver/egjs-flicking) — Naver, a South Korean portal and search engine, claims 30 million people use their carousel component every day. Works with Angular, React, Vue and Preact. 

NAVER   

[[New\] Free JavaScript Code Quality & Security Scanner - Real‑Time Scan](https://snyk.io/lp/javascript-snyk-code-checker/?utm_campaign=PR-LH-Snyk-Code-2021&utm_medium=Paid-Email&utm_source=Cooperpress&utm_content=JSW-JS-Checker) — Like Grammarly for your code. Scan your JavaScript code for quality & security issues, and get fix advice in your IDE. 

Snyk sponsor   

[FlexSearch.js 0.7.0: A Full Text Search Library with No Dependencies](https://github.com/nextapps-de/flexsearch) — Claims to outperform its competition while supporting features like multi-word matching and phonetic transformations. Happy in both the browser and Node.js. 

Nextapps GmbH   

[PM2 5.0 Released: The Production Process Manager](https://github.com/Unitech/pm2/blob/master/CHANGELOG.md#500) — [PM2](https://pm2.keymetrics.io/) is a popular process manager and load balancer for long running Node.js apps. 5.0 is a significant release adding a new local system monitoring feature for tracking metrics like CPU and memory use. 

Alexandre Strzelewicz   

[Naive UI: A Vue 3 Component Library](https://www.naiveui.com/en-US/os-theme) — I kinda respect it describes itself as “not too slow” and “kinda interesting”(!) 

TuSimple   

[Nanostores: A 152 Byte State Manager for React/Preact/Vue/Svelte with Many Atomic Tree-Shakable Stores](https://github.com/ai/nanostores) 
Andrey Sitnik   

[Angular Flex-Layout: A Sophisticated Layout API for Angular using Flexbox Media Queries](https://github.com/angular/flex-layout) 
Angular   

🎵 And one for fun.. 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/xg84fgfq7fdrddg9amxq.jpg)](https://rxjchess.com/)  

[RxJChess: A Chess Game Built on React, Redux and RxJS](https://rxjchess.com/) — You can play against the CPU or even find a friend. Plays pretty well. Once you’ve had enough of losing (or is that just me?) you can also check out [the source](https://github.com/prashanthselvam/crazychess). 

Prashanth Selvam         

Published by [Cooperpress](https://cooperpress.com/) and edited by [Peter Cooper](https://twitter.com/peterc) 

'JavaScript' is a trademark of Oracle Corporation in the US
We are not endorsed by or affiliated with Oracle. 

[Change your email address](https://javascriptweekly.com/edit_subscription/*|UID|*) or [stop getting this newsletter](https://javascriptweekly.com/leave/*|UID|*). 

© Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom