New component patterns for Vue 3

Andy Li rates and reviews three new component patterns for Vue 3.
Ready to master Vue.js? With weekly Vue js tutorials on the latest topics, and exclusive content with Evan You (the creator of Vue), Vue Mastery is the ultimate learning resource for Vue developers to level-up their skills. Watch more free Vuejs tutorials 👉 www.vuemastery.com/courses
Get in touch 👉 [e-mail]
0:00 3 component patterns
1:11 Hybrid Syntax
7:36 Functional Syntax
15:35 Script Setup Syntax

[@VueMastery]

FYI💡 We have an entire library of premium Vue courses for all skill levels filled with detailed explanations like this one. You can dive in here: buff.ly/3GptTTS

[@DedicatedManagers]

Well done. Best video by this channel. More videos from Andy Li!

[@Gepeto213]

As I'm refactoring many components to script setup this video is very enlightening on the advantage to use it. A must watch video!

[@brad7957]

Thanks for this. I've been using Vue for about 3 years now and have been procrastinating learning the new APIs but it seems much simpler than I expected (thanks to your teaching skills, no doubt) :)

[@henkspaaij7961]

Very well articulated and explained. Thank you!

[@pranav7374]

Hey, @14:48 for defining default prop value we can further simplify by making use of '||' OR operator returning left operand if true or else right operand (default value) for eg:-
count:_props.count || -1;

[@nove1398]

Finally am explanation on the who old change, this is very 😎

[@gazisalahuddin8681]

Thanks a lot. Loved it

[@fluffyartdev]

You can use default values while object destructuring..but setup looks rly promising except the thing that everything will be exposed (exported). That doesn't seem good

[@vladshepeluk7442]

Hi! Thanks great job ❤ Is it possible to use context in setup syntax?

[@edu.paixao]

18:23 it's so beautiful
*interface* 😍

[@RobertoMaurizzi]

Uuuh that was useful, thanks.
I understood I'm using a functional component for a quite complex form rendering component I'm writing, but I was calling it "render function component" 😅 (and I already found out reactive variables don't work because changing them doesn't trigger render function execution, nice to have official confirmation :D)

[@x0r1k]

Wow, didn't know about props with default in typescript

[@jacobhassel5860]

Great vid! Really excited about Vue 3 and using script setup with typescript. Unfortunately I can't migrate to Vue 3 until the libraries we use start supporting it, specifically Vuetify. It could be another year before we can upgrade 😢.

[@cnikolov]

vuetify its blocker for us too, but they save us soo much time that its worth to wait the bloody year :D

[@mjmontes2653]

awesome 🤓

[@vevan]

I'm still love options api. the compsition api may do some things better, so we probably will switch to hybird components, but it's hard to convince me to use setup script.

[@samuelmorkbednarzkepler]

Why? Script setup is just good. There's hardly any downsides

[@VitorNeves]

I have a question about defining props using TS annotation. How can we use validator?

[@tianqing9363]

i am curious what software you used to create this video?

[@magdasmircea4419]

I have a question. Does options API gets tree shaked if not used, in the final build if webpacked is used?

[@VueMastery]

No, because the Composition API is still relying on options. For example, you would still have to rely on the props option either way. Even with script setup, the final compiled code would still rely on the props option.

[@mathe42]

You can treeshake most of it away with some build time flag!

[@heyyy4987]

There is a risk of vue macro for typescript Will blow it sometime?

[@justafreak15able]

How do you name a component in script setup?

[@io-er1ex]

You can have more than one script tag e.g

export default { name: 'ComponentName' };

[@justafreak15able]

@@io-er1ex is that the only way?

[@alvinindrap]

If I only import
import ComponentName from '../component.vue'

[@justafreak15able]

@@alvinindrap That’s not my question.

[@LewizW]

looks like hooks from react?

[@RR-zd5yt]

indeed it is

[@fluffyartdev]

There is a little difference, useEffect does almost all the work, but with vue you still have uccess to lifecycle, you always known that you have your window object in your onMounted hook

[@alvinindrap]

Why template need below in script setup?

[@VueMastery]

It's purely for readability purposes. The idea is that the actions (variable declarations and function definitions) in script has to happen before the code in the template would make sense. Also, that's the convention you would see in the Vue docs.

[@alvinindrap]

@@VueMastery Okay, Thank you

[@abylaysanduzel5117]

You really look like Kazakh)

[@rush-rr]

Функциональные компоненты жижа какая-то

[@mahmoudalmontasser8369]

Vue is turning into React 😂

[@JPilsonSumbo]

I would like to disagree lol

[@lualua5288]

clich

[@cyberpunkdarren]

Sadly vue 3 is a step backward in my opinion. All kinds of unecessary syntax. Deviates from the simple class model that made vue easy.

[@YourEverydayDeveloper]

same in my opinion. Too many possibilities to do the same thing and therefore a bigger learning curve.

[@cyberpunkdarren]

@@YourEverydayDeveloper its sad because simplicity was what made vue great. Now its too confusing. Too many chefs

[@furkangokhasan8893]

Actually, vue is still vue. You can still use options api. But if you work on a big project, options api start to be very confusing. Vue needs the composition api.

[@cyberpunkdarren]

@@furkangokhasan8893 maybe in spirit but in practice all this "defineComponent" "ref" and "setup" is unecessary and breaks the whole semantics of MVC, classes, methods. I have very big ui projects and if you design it right, using events you dont need more api complexity.

[@JonasEmanuel20]

I agree with you. If the Vue 3 had only a syntax for define the components the learning curve would be smaller and the apprenticeship less confuse.

[@zlatkoiliev8927]

Basically, stealing ideas from React 😂

[@samuelmorkbednarzkepler]

Nope