The definitive guide to shallowRef in Vue

✨ ref and reactive are two well known reactivity building blocks in the Vue Composition API. But there are more - for example shallowRef! But what is the difference between shallowRef and ref - and when to use it?

In this video we will cover everything around the shallowRef reactivity building block:
🧠 Explaining how it is different from ref and how it works
✅ Scenarios when to use it
🔍 Show various examples in live projects like VueUse and Nuxt.js

Links:
🔗 First playground: https://play.vuejs.org/#eNp9UsFu1DAQ/...
🔗Signals playground: https://play.vuejs.org/#eNp9Uk1vnDAQ/...
Docs: https://vuejs.org/api/reactivity-adva...
🔗 VueUse Example: https://github.com/vueuse/vueuse/blob...
🔗 Nuxt Example: https://github.com/nuxt/nuxt/pull/23600
🔗 Setting up useFetch/useAsyncData to use shallowRef: https://stackblitz.com/edit/shallow-r...

Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up!

🌐 Connect further:
Website: https://www.lichter.io
Twitter/X: Twitter: TheAlexLichter
Twitch: Twitch: TheAlexLichter

Chapters:

00:00 Intro
00:23 What is shallowRef doing and how it compares to ref?
02:33 Main use cases when to use shallowRef
03:29 Building our own Signals API with shallowRef
07:27 useFetch in VueUse using shallowRef
08:42 Options to use shallowRef in Nuxt for data fetching
09:44 Using shallowRef by default for useFetch/useAsyncData
10:29 Summary

#Nuxt3 #vuejs #nuxtjs #shallowref #usenuxtapp #webdevelopment #frontend #frontenddeveloper