Weekly Vue News - #64 - Reactivity Transform

Hi 👋

Last week published a new blog post about a polite newsletter signup that I have developed for my portfolio website based on Nuxt 3.

This week is quite busy and I'll not be able to work on cool stuff 🫠

Have a great week ☀️

Vue Tip: Reactivity Transform

⚠️ Reactivity Transform is currently an experimental feature. It is disabled by default and requires explicit opt-in. It may also change before being finalized.

ℹ️ Reactivity Transform is a Composition-API-specific feature and requires a build step.

One of the most confusing concepts in Vue 3 is the use of refs vs. reactive objects. It's easy to lose reactivity when destructuring reactive objects, while it can be cumbersome to use .value everywhere when using refs. Also, .value is easy to miss if not using a type system.

Vue Reactivity Transform is a new experimental compile-time transform that allows us to write code like this:

We no longer need to use .value. In fact, this makes our JS/TS code work the same way as in Vue templates where root-level refs are automatically unwrapped.

Every reactivity API that returns refs will have a $-prefixed macro equivalent. These APIs include:

• ref -> $ref
• computed -> $computed
• shallowRef -> $shallowRef
• customRef -> $customRef
• toRef -> $toRef

The RFC defines some more compiler-macros:

• Destructure objects or convert existing refs to reactive variables with $()
• Destructuring defineProps() in <script setup> also creates reactive variables.
• Retrieve the underlying refs from reactive variables with $$()

Read more about Reactivity Transform in the RFC.

Curated Vue Content

Building a Polite Newsletter Popup With Nuxt 3

In this article, I'll explain how I built a polite popup to ask people if they would like to subscribe to my newsletter using Nuxt 3.

🤩 Nuxt Movies

👉🏻 Movies app demo built using Nuxt 3, Vue 3, UnoCSS, Image Module, The Movie Database API and TypeScript.

🍿 Live preview: https://movies.nuxt.space/

📕 Vue 3 + Pinia + Supabase Auth

👉🏻 This article will run through how to use Supabase Auth (email) in a Vue 3 app, using Pinia for state management.

🛠️ Vue Macros

👉🏻 Explore and extend more macros and syntax sugar to Vue.

👉🏻 Supports both Vue 2 and Vue 3 out-of-the-box.

👉🏻 Full TypeScript / Volar support.

👉🏻 Supports Vite, Webpack, Vue CLI, Rollup, esbuild and more, powered by unplugin.

📹 Patterns of VueUse (Talk by Anthony Fu)

👉🏻 Patterns and best practices the team learnt during the two years building VueUse

📹 ViteConf recording of the Vite ecosystem

👉🏻 See all the tools that influenced, use, or are used by Vite.

JavaScript Tip: Function that throws an error if a required parameter is missing

Sometimes we need to ensure that a required parameter has been provided. This can be achieved by using default function parameters.

Default function parameters allow named parameters to be initialized with default values if no value or undefined is passed.

We can take the advantages of this ES6 feature and make a function which throws an error and assign it as default value for required parameters. So when no parameter is passed this function will be called and it will thrown an error.

Curated Web Development Content

📕 TypeScript: Type Guards

👉🏻 Robin shows how to check for user defined types by using so-called user-defined type guards.

📕 Write better error messages

👉🏻 "It explains what happened and why, provides reassurance, is empathetic, helps the user fix the issue and gives the user a way out."

📕 The Web’s Next Transition

👉🏻 Kent takes a detailed look at the transition to new and improved architectures (progressively enhanced SPAs) for building web applications, and how changes to multi-page apps are coming about.

👉🏻 ~33 minutes read time 😮

Quote of the Week