VueUse and Our Favorite Composables

06/26/24 • 36 min

VueUse might be a library known to many Vue and Nuxt developers - and if not, it should be quickly! With over 200 functions, composables and utilities, it provides a "standard composable kit" which Alex and Michael take a look at in this DejaVue episode. And more than that, they also share their favorite composables that they use or learnt a lot from. Definitely do not miss that out and stay for the spoilers at the end.

Enjoy the episode!

Chapters

(00:00) - Welcome to DejaVue
(00:45) - An Introduction to VueUse
(01:59) - How often do you use VueUse?
(03:50) - Using a library or better to DIY?
(05:38) - The Reactivity Layer
(06:43) - Docs, Demos and Source Code
(09:52) - Composable 1 - useEventListener
(13:10) - Composable 2 and 3 - useDebounceFn & useThrottleFn
(17:46) - Composable 4 - useLocalStorage
(24:00) - Composable 5 - useMagicKeys
(29:04) - Util 6 - makeDestructurable
(33:18) - Wrapping up around VueUse
(34:43) - Nuxt Tips Collection
(35:33) - SPOILER!!!

Links and Resources

Links marked with * are affiliate links. We get a small commission when you register for the service through our link. This helps us to keep the podcast running. We only include affiliate links for services mentioned in the episode or that we use ourselves.

Enjoy the episode!

Chapters

(00:00) - Welcome to DejaVue
(00:45) - An Introduction to VueUse
(01:59) - How often do you use VueUse?
(03:50) - Using a library or better to DIY?
(05:38) - The Reactivity Layer
(06:43) - Docs, Demos and Source Code
(09:52) - Composable 1 - useEventListener
(13:10) - Composable 2 and 3 - useDebounceFn & useThrottleFn
(17:46) - Composable 4 - useLocalStorage
(24:00) - Composable 5 - useMagicKeys
(29:04) - Util 6 - makeDestructurable
(33:18) - Wrapping up around VueUse
(34:43) - Nuxt Tips Collection
(35:33) - SPOILER!!!

Links and Resources

Previous Episode

The Road to Nuxt 4 (with Daniel Roe)

Nuxt 4 is cooking for a while and is close to being released soon. An ideal time for a DejaVue episode where Michael and Alex we explore the upcoming major version of the metaframework with the lead of the Nuxt team, Daniel Roe.

After introducing Daniel, we jump into the power of small changes and how Daniel explains his day job to people. We then dive into why Nuxt 4 is being necessary "now", its top priorities, and how to ease any fears about upgrading (don't worry folks!). Eventually, new Nuxt 4 changes and even features, like the improved folder structure will be discussed. As a bonus, Daniel reveals how he got into programming and that we was a real hacker-man early on.

And of course, Daniel reveals when Nuxt 4 will be released in the final minutes, as well as his upcoming Nuxt for React Devs course.

Enjoy the episode!

Chapters

(00:00) - Getting Started and Guest Introduction
(02:43) - How do you Describe your Day Job?
(04:33) - The Power of Small Changes
(11:50) - April Fools Joke
(13:02) - Why Nuxt 4 Now?
(19:00) - The Top Priority for Nuxt 4
(20:54) - How to reduce the Fear of Nuxt 4?
(27:48) - Codemods for Nuxt 4
(29:41) - Experiencing Nuxt 4 Migrations
(32:02) - New Folder Structure
(34:06) - Exciting New Nuxt 4 Features
(36:46) - Compatibility Date
(44:26) - How did you get into Programming?
(48:44) - Daniel's Contact with the Vue World
(52:38) - University Degrees
(59:42) - Joining the Core Team
(01:04:28) - How Daniel is Funding
(01:08:56) - The Freedom of Doing the Things You Enjoy
(01:12:45) - When will Nuxt 4 be released?
(01:15:20) - Interesting Projects and Courses of Daniel
(01:17:25) - Wrapping Up

Links and Resources

Next Episode

Ten Years of Vue (with Evan You)

This DejaVue episode is special - Alex and Michael meet up with the creator of Vue, Vite and Rolldown, Evan You himself and talk about the last ten years of Vue!

Starting with how Vue.js started as a side project while Evan still worked at Google, Evan shares the story of how Vue.js came to be and how it evolved over the years. Interesting insights, such as why the Composition API was created and which initial problems should be solved with it, are shared in this episode. And to all that, questions from the Q&A were answered as well, touching topics like petite-vue, if and how the Options API will persist and how opinionated Vue.js is.

After an hour of content and insights, the episode ends with a tiny cliffhanger, as Part Two of the conversation covering the future of Vue, possible Vue 4 features, Vapor mode, Vue 3.5 and more, will be released next week!

Enjoy the episode!

Chapters

(00:00) - Welcome to DejaVue!
(01:09) - How did Vue.js start out?
(04:48) - The Initial Version of Vue.js
(13:42) - Do new Vue users start without a build step?
(15:02) - Vue's expansion to different use cases
(18:14) - Is Petite Vue dead?
(21:03) - Why Vue 2?
(29:58) - How opinionated is Vue?
(35:15) - The Transition from Vue 2 to Vue 3
(36:32) - How did the idea for the Composition API came up?
(38:24) - Options API vs Composition API
(44:54) - Will the Options API stick around?
(46:10) - Overhead of keeping APIs around
(51:13) - Considering to disable Options API via a flag?
(53:05) - The former class-based API proposal
(58:03) - Classes with Vue's reactivity concept
(59:38) - Whaat, there is a Part 2?

Links and Resources

DejaVue - VueUse and Our Favorite Composables

Transcript

Speaker 100:00:00.399

Welcome to Deja View.

Speaker 200:00:02.720

Your favorite Vue podcast? You just don't know it yet. Or maybe do by now. Maybe you have a little Deja View. You'll see. And, yeah, I am here, Alex and Lichte, a WAP engineering consultant and Nuxt team member, Also doing lots of content around Nuxt, Vue, JavaScript, TypeScript on YouTube, and every now and then blogging. And I'm here with Michael Thiesen. Hey, Michael.<