DejaVue

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!
---
Your Hosts
* Michael Thiessen
* Twitter - / michaelthiessen
* UA-cam - ‪@michaelnthiessen‬
* Web - michaelnthiessen.com/
* Alexander Lichter
* UA-cam - ‪@TheAlexLichter‬
* Twitter - / thealexlichter
* Web - www.lichter.io/
--
Chapter marks:
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
▶ Nuxt Tips Collection michaelnthiessen.com/nuxt-tip...
▶ Mastering Nuxt* vuebundle.com/?friend=DEJAVUE
▶ VueUse vueuse.org/
▶ VueDemi github.com/vueuse/vue-demi
▶ Slidev sli.dev/
▶ is-even package www.npmjs.com/package/is-even
▶ is-odd package www.npmjs.com/package/is-odd
▶ Composable 1 - useEventListener vueuse.org/core/useEventListe...
▶ Composable 2 - useDebounceFn vueuse.org/shared/useDebounceFn/
▶ Composable 3 - useThrottleFn vueuse.org/shared/useThrottleFn/
▶ Debounce Vs Throttle kettanaito.com/blog/debounce-...
▶ Composable 4 - useLocalStorage vueuse.org/core/useLocalStorage/
▶ Localstorage example from Alex' Website - github.com/manniL/lichter.io/...
▶ Composable 5 - useMagicKeys vueuse.org/core/useMagicKeys/
▶ Util 6 - makeDestructurable vueuse.org/shared/makeDestruc...
▶ Bonus - createReusableTemplate vueuse.org/core/createReusabl...
--
Follow DejaVue on
▶ The Web: dejavue.fm/
▶ Twitter: / dejavuefm
▶ Apple Podcast: podcasts.apple.com/us/podcast...
▶ UA-cam: / @dejavuefm
▶ Spotify: open.spotify.com/show/5VQ15QH...
▶ Deezer: www.deezer.com/show/1000792252
▶ Amazon Music: music.amazon.com/podcasts/798...
▶ Pocket Casts: pca.st/49qr8d1k
---
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.

[@lararawf6100]

I'm excited to move as long as it only takes a day, not 4 months! Great work.

[@alimaher1]

Amazing video for a great library! One more thing that you guys hinted to, also Evan You himself mentioned, is reading its source code is a great way to learn not only about Vue but akso about Javascript in general. Also, regarding code quality and organization. Can't wait for native signals support so that the whole ecosystem would enjoy that library. It would be a game changer.

[@ElFerBlocks]

I have been useed composables like a function library ( number format, data to sql format , string function like vfp etc) but i think is time to use more often with with all power of composables

[@rrd_webmania]

I am ending up adding vueuse to almost all of my projects 😊
Like Michael, implementing my own and realize ah there was a better way 😂

[@DejaVueFm]

One day we look up what we need in VueUse first and *then* try to write our own implementations if it doesn't exist 😛

[@lararawf6100]

I was thinking that
“a jack of all trades is a master of none, but oftentimes better than a master of one.
Is bad!
But it's make you more creative!

[@nyambe]

makeDestructurable makes sense when re-factoring. Can it be used to get single values of an Array?

[@lararawf6100]

I volunteered and started coding, eagerly seeking more experience to contribute.