Build your own Custom Composables in Vue

[@VueMastery]

Watch the full Coding Better Composables course here: www.vuemastery.com/courses/coding-better-composables/what-is-a-composable

[@Andrey-il8rh]

Very important topic, looking to see more content on that. Looking on how people use composition api in big enterprise projects I see a lot of issues with understanding the fundamentals which causes a lot of problems such as: - Tight coupling of composables between each other: people try to call a composable inside composable which doesn't allow proper tree shaking - Placing to much stuff inside a composable - many times people just detach all domain logic from components, creating one mega composable that just floats in space similar to Vuex store which causes memory leaks and makes overall application more complex to understand - Trying to use reactivity for everything - for some reason people just thinking that reactivity is free of charge and converts objects with tenths of thousands properties received from a server straight into reactive function, which leads to huge issues with performance. Summarizing all of the above I think it would be great to talk about how to "not write composables" or a list of do's and don'ts

[@eddieaguilar4878]

Where can i find this content. It is gonna be very useful to read about it

[@Andrey-il8rh]

@@eddieaguilar4878 what content? It was a suggestion/request to Vue Mastery, not something already available int the internet for you to watch

[@VueMastery]

Hello! You can find a written tutorial series on Composables in our blog here: www.vuemastery.com/blog/coding-better-composables-1-of-5 I just linked you to Part 1, but Parts 2-5 are also available there. 😁

[@illmatic7005]

One thing to avoid would be using "options" as a param for the composition APIs that you build. This forces the user dev of the API to have to go read the code to figure out what the options are, and in the case of your third example would force them to go down a rabbit hole of reading API implementations that the API they are trying to call is using. For writing APIs in any language / framework it's best to expose what all possible args are and in JS can be done by: function myFunc({arg1, arg2}) {...} This allows the caller of myFunc to quickly see what the param options are and pass them along in a single object, most IDEs will show this as a hint when using the function, so you won't even have to go and find where the API is defined.

[@Peter-bg1ku]

You can add doc blocks to the function with type definitions.

[@felixbecquart]

Love your videos. Sooo pedagogic

[@avimehenwal]

Wow!! going through such a advanced topic looks like a breeze with amazing instructors :D Again thankyou for such super high quality video (Y) C Cheers

[@fourthkim3715]

I wanna ask on 4:09, isnt that way options is required? How to make it as optional?

[@GOGODEV]

Really nice video. Congrats!

[@VELIXYZ]

Thank you! Very useful video, wish i can see it everyday

[@LuckyTechy]

lol what. why can't you?

[@gateitogototo8976]

amazing but also mindblowing for me 😁

[@024hadzia]

Very useful. Thanks! :) 💚

[@Zaloganon]

I have a question, are there any difference between This one: myValue ?? defaultValue and This one: myValue || defaultValue In both cases, it will return the firt truly value found, so, why does exists '??' operator in js?

[@hhh0118]

"myValue ?? defaultValue" returns the first value that is not explicitly null or undefined, meaning it will return the first defined value, including an empty string, 0, true or false. Let's say you want the "defaultValue" set to the boolean "true", but you want to be able to pass the boolean "false" as "myValue". Using "myValue ?? defaultValue" will work as intended in that case because "myValue" isn't null or undefined, while "myValue || defaultValue" would always ignore the boolean "false" being sent as "myValue". "myValue || defaultValue" returns the first truthy value, meaning it will skip e.g. undefined, null, false, 0 or empty string. You would only ever be able to pass truthy values as "myValue", or they would always be ignored and "defaultValue" would be used instead. undefined ?? null ?? false ?? true -> returns the boolean "false" undefined ?? null ?? 0 ?? true -> returns the number 0 undefined ?? null ?? "" ?? true -> returns an empty string undefined || null || false || 0 || "" || true -> returns the boolean "true" I might've repeated myself a bit, but I hope that cleared things up.

[@Zaloganon]

@@hhh0118 a lot of thanks for explanation! I didn't know that. Now I understand the difference :D

[@kecoje]

Why not use typescript?

[@hmatpin]

I think the problem with Vue3 is that if they were just going to copy everything from react, which is the case with composables, they should have kept the original names as well, i.e. composables should be called React custom hooks.

[@azizsafudin]

Isn’t that just a hook?

[@victoralcala]

React name them hooks, Vue name them composables. Yes, same idea

[@trunghieuhoang3839]

Hooks with super power :)) It can be used out side components, don't need to useCallback, useMemo for optimizing rerender. Anw I love react thought

[@killerdroid99]

@@trunghieuhoang3839 I don't want to hear those *useFootGuns* atleast here

[@Peter-bg1ku]

Yes, same thing. Very nice addition to Vue.

[@xenos112]

​@@killerdroid99agree

[@andogrando487]

I've been seeing a lot of arguments lately that we should just be using typescript classes in favor of composables - just curious if anyone had some feelings about that.

[@briankgarland]

So, basically, it's a utility function?

[@dpv.school1236]

I didn't really understand anything you said because you were always explaining JS and TS syntax and only gave a couple of examples.

[@Andrey-il8rh]

Maybe you need to learn JS and TS first before watching such videos?

[@ZlatkoIliev-s4j]

Basically this is a React.js hooks! Why is everything in Vue copy-pasted from React mostly?!?

[@xman6267]

Svelte or vue?

[@ftapia]

Why ask in a Vue channel?

[@dpv.school1236]

Svetle

[@fasoolya]

Nuxt

[@nimblefrogcreations]

Video: How to build your own custom composable Also Video: Here's how you install and use our own pre-made composables

[@isidorenwaiwu2793]

More more more

[@VueMastery]

Have you seen our blog series? It's 5 parts and talks all about Composables: www.vuemastery.com/blog/coding-better-composables-1-of-5

[@rallolollo9309]

rly sad that vue is going down the react way, it's a bad way confusing, much boilerplate for nothing i hope they keep the double way updated with all the new features otherwise bb vue and i will move to svelte for fast small projects and angular for big ones

[@dpv.school1236]

I agree with you it's really boilerplate that allows developers write strange stupid logic instead of business logic and force to think about side effects. Global functions, events and states are always evil especially in junior hands

[@Andrey-il8rh]

@@dpv.school1236 well, Vue 3 still supports options API so you can continue using that, composition API is clearly not for beginners, it's just a tool for a very specific use cases, similar to Vuex - you should not put all of your data inside of it. So if you allow yourself to learn with open mind and a grain of common sense - Composition API won't become anything stupid

[@AnassSanba-f5d]

Bruh it's just a JavaScript function

[@isidorenwaiwu2793]

More more more