The Power of Vue 3 Function Refs - Part 1

Function refs—a specific kind of template ref—have quickly become my favorite Vue 3 feature. They unlock clean, powerful composition function patterns, with great DX for both the function authors and function consumers.

In this video, I introduce what function refs are, how they work, and why they're so awesome!

If you like this content, check out my book, Rethinking Reusability in Vue! It's 100+ pages of writing, code, and data viz, all in pursuit of Vue 3 best practices.

[shmert]

Really good amount of depth. Not just “how”, but “why”.

[ozzyfromspace]

Absolutely exceptional explanation, Alex! Cheers! 🍻

[alisonfromaccy]

Thanks Alex, Great content.. Good to see some MORE-Advanced features above the versatility for Vue, keep up the hard work, hope to see more in the future.

[mihaiudvar]

nice and useful content. Vue3 lacks in explained examples so videos like these are super usefull for someone that just jumped into Vue

[boska]

Wooow amazing, just what I needed for creating useSelect composable, tnx man :) cheers

[CirTap]

using ref(null) for element refs makes it more consistent if you mix it with native DOM (traversal) functions where a "no match/not found" also results in null instead of undefined, what the empty ref() will give you. You can then use the typedef HTMLElement|null whether it's this ref or some fallbck DOM func result.

[alanbloom]

Never thought of approaching the problem in this way. Can already see this pattern being implemented in a few places for me :-) thanks

[sebastianclaes-swed]

Awesome I always took the approach of passing variables to my composables, because I didn’t knew better.

[emmyleke]

Just something to note, if you have <script setup> I think you do not have to import ref etc. You just have to set your ide linting not to throw off errors.

[omricohen]

Hi there, if i use ref for costum custom omponent, how did i get accsess to the component functions?

[emmyleke]

You are so good man. I need to see more of you.

[sebastianbechtold]

What if you want to attach multiple instances of composable functionality to the same element? With this example, the "ref" can be consumed by one thing only, or am I overlooking something?

[allenmtrinh]

Amazing commentary. Hope to see more from you.

[dfidalgo]

For this case, I think a custom directive would fit better, since it wouldn't block us from accessing the ref if we want (of course I can use the functionRef inside another function, but it's not as straight forward as just using a "v-dimension", for example).

[cloudsystem]

thank you very much Alex thats a super content

[_the_one_]

Hi Alex, thanks for this video, but I think you could have used just element without using function refs. You only had to export the ref in the composable function and import it like const { element } = useDimension('width')

[fristysOriginal]

Why not simply return element (the ref inside of the method) instead of this function ref?

[justsmile]

How i just started in this front end journey and i have to choose a front end framework so far i like vue js and i want to work hard to be very professional but i see that there is lot of react js jobs what do you advice me thnks

[yavuz]

You should keep the mic away from you'r keyboard or use an external one if its the laptop mic. Kinda hurts my ears wearing a headset

[truthteachers]

All the goodness is lost when you dont provide the source code for us to learn and test. Why do so many do this? Sigh! Anyway dumping this as it may be outdated anyway.