7 Important Vue 3 Composition and Composable Functions Explained

Today will look at the 7 most common composition functions in Vue 3. We'll also create our own composable function to maximize reusability throughout our codebase. Prior to Vue 3 developers need to create large complex javascript objects which contained all the state, methods, watchers and computed properties.

#vue #composition

✨ SOCIAL ✨

⚡ RESOURCES ⚡

⭐ TIMESTAMPS ⭐
0:00 - Why Composition API?
1:21 - ref and reactive
2:29 - toRefs
2:57 - computed
3:37 - watchEffect
3:48 - watch
4:36 - lifecycle functions
5:13 - comosable functions

[arsalabangash]

This is one of those coding videos that's so good, you feel like you can jump straight into your code and begin refactoring with confidence. Very well done, Justin! This open source learner of the internet sincerely thanks you!

[deekaneable]

Great video. I've been transitioning from the options api to the composition api and this was helpful.

[ricko]

ok good, but you forgot about the script setup which is even better

<script setup>
</script>

💪

[DEVDerr]

5:24 I think we need to mark the important thing here, that "composable functions" have this meaning you said in this episode but ONLY WITHIN THE VUE (or React) CONTEXT

Generally "composable functions" are just a simple functions that only return some processed output from your input and that's all.
They allow you to compose your logic like a LEGO bricks by nesting/reusing/composing them like so

divide(add(2, 2), 2) // => 2

this is why they're called "composable". Because you can "compose" them to build your greater logic from smaller parts of logic described within those "composable" functions.
They're not directly connected to the state, because their purpose is to be stateless. This "state" thing is only changed within the front-end framework concept

[erickh]

love vue use composables, writing complex frontend app became fun again

[arturitoproductions]

So nice explanation, finally I am understanding the Composition API.. by the way, at the beginning (0:50) you mention we will create our own composable function.. but I think the video finished without this part

[hasiburrahman]

This video helps me a lot. You explained very clearly. Thanks

[TLJAFAR]

That's awesome 😍 to reduce development time

[Vietnamkid]

Thank you! I didn't understand the toRefs and watchEffect

[benkhemismarwen]

thank you! this is 100% knowledge each word is useful, I like that

[milogray]

Wow, you explained it perfectly. Wish I'd found your channel sooner.

[skoizumi]

Thanks for the great video. I learn a lot from this. I understand if I want to group sateful logics i can use composable functions. What if I wan to group stateless function ( for example currency convertsion or date formating ) can I follow any design pattern instead of composable functions?

[Kwasyuk]

Just found out about your channel, great content! Love the whole "Fireship.io style" you have going! Aswell as your focus on Vue

[MrVillyt]

You got it, Justin! I like the way your videos are made!

[_the_one_]

Hey Justin. Thanks for the always awesome content! What UI framework do you recommend to use with Vue 3 ? Considering how ready they are ?

[zergzerg]

Why you use setup function instead of script setup? After all, script setup looks more elegant

[andreidvoynos]

I think you're wrong about the restriction at the end of the video, that you can only call them at the root level of your setup function. That is definitely true for React, but in Vue, composable functions are a bit different, so they don't have that restriction.

[RianYK]

now I use composition API more than options API in Vue JS

[korigamik]

at 3:48 you forgot the $ sign in the template string. This makes the code wrong and the what you say about it as well, please address this.

[RR-etzp]

the problem with these vids is that they never explain where those functions are used when building a site. eg. people learn arrays, but where do you use them? in comments for example! That makes more sense to explain where and why