Vue 3 & A First Look at the Composition API

Vue 3 will be released in 2020 and it'll add one pretty neat nice feature: The Composition API. Time for a first look and introduction to this new, optional way of writing your Vue components!
Join the full "Vue - The Complete Guide" course: acad.link/vuejs
Check out all our other courses: academind.com/learn/our-courses
----------
Check the official Vue 3 Composition API RFC: vue-composition-api-rfc.netli...
And the API Reference: vue-composition-api-rfc.netli...
----------
• Go to www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts
• Follow @maxedapps and @academind_real on Twitter
• Follow @academind_real on Instagram: / academind_real
• Join our Facebook community on / academindchannel
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

[@richharris3944]

If you want to skip review of Vue 2 options API, start video at 17:23

[@maskman4821]

This is the best vue-composition-api tutorial ever, I understand everything that Max explained and talked about !!!

[@nyambe]

Max is simply the best 🎸

[@UsamaKhan-um3nr]

Max sir, you are the great teacher, I have learned VueJs, nodeJs and now I am learning angular 8 from your videos. your explanations and voice quality are awesome...

[@superknife0512]

This composition API make Vue more and more like functional programing style which is awesome (I really like it when using React) :3

[@cecitorresmx]

Love it! I could fastly learn advantages and how to use the Composition API. Thanks Max!

[@lizzi4289]

2AM KZbin: Do you want to learn some Vue 3 new api Me: Click

[@noherczeg]

Unit testing would have been a great addition.

[@alwaysgrowww]

I really really thank you for this video. Happy to see you creating videos for vue

[@DEVDerr]

Finally normal functional-way of writing things in Vue. Thanks Evan! ^^ The only thing I didn't like in Vue were the options, where you were limited to pass only object/array properties and nothing more

[@dominiclapitan8466]

Thank you for your help Max! Really appreciate these videos especially your efforts. Thank you!

[@academind]

Glad you like them, thank you!

[@user-hn1ph6ry8l]

Aha! Somebody get ridden "low coupling, high cohesion" and really think about it! :) Thank for this tutorial, its great! And it's totally clean for non-native speakers.

[@DerSpudi]

Looks awesome! I didn't really enjoy working with Vue 2 as much as I hoped to, but with the new Composition API and better TypeScript support, I'll surely give Vue another chance (once it's out).

[@msvmanikantasrivishnu7788]

Max is max..💛 love max

[@frankyb702]

Gary gaaaay

[@msvmanikantasrivishnu7788]

Teachers are next to god means Acharya devo bhava..not offensive word

[@yasser.dev7]

you really a great teacher and this is the best channel in the world ,thanks very much for your great effort.

[@keithnicholas]

Thanks for this! Nice intro to the composition API

[@NellyMoseki]

Thank you, finally understand the api's use!!

[@waasar]

This composition API really fixes my main issue with the framework. After a while it could get really hard to keep track of all the different things going on inside big components. I'm looking forward to using Vue with this API for my next personal project.

[@ArnaudMEURET]

Congratulations on a very well structured introduction to VueComposition API. I’m not sold to it however and it seems a high price to pay just to maintain some backward compatibility. These new levels of indirection and hidden magic traded for some lexical practicality... meh. I would have preferred if they broke the whole model and fused all this with VueX stuff in a really elegant approach. That is what major versions are for. This should have been 2.8.

[@RajaSekar-jw3tq]

That was a great introduction to Vue 3 max... But I feel it's too much for simple to medium vue apps as the Vue 2 syntax is more predictable where you can find ur data.... Consider a 100 data variables are there and for making everything reactive we need to surround everything with the keywords reactive and ref... It's crazy

[@PshemoPL]

Why not mimic data object with one single reactive variable in setup? setup() { const data = reactive({ products: [], show: false }) ... return { data, ... } } I really like this new composition API. Looking forward for Vue 3!

[@sergiishilingov5609]

@@PshemoPL and what about all computed and watch elements in your component. Will you mimic it too? It's too many data inside one setup method and with those reactive, ref and .value it becomes more difficult to read.

[@guibirow]

This is why is an alternative approach, use which one is best

[@patrickc.6183]

It does look a lot like React Hooks. I feel that the Composition API will become a de facto standard, and may take away most of what makes Vue feel intuitive...

[@camillo8575]

for what i understand the pro is that you can separate things in reusable javascript files

[@lucastitokotaranin7303]

Yo! Your english improved. Have an old VUE course as reference. Keep your great content and courses coming.

[@TheNerdyDev]

Max is Infinity. Superb stuff always.

[@anandbaraik5010]

You too bro. Your videos too always has deep information.

[@TheNerdyDev]

@@anandbaraik5010 Thanks man. Means a lot.

[@_the_one_1]

Thank you for this video Max.

[@lschnoller2]

Thanks Maximilan, you're the best!

[@MakeAppswithDanny]

Thanks Max, that’s a great intro and alleviated my confusion around the Composition API. I have to say, I’m not sure I like it. Seems somehow dirty and messy. I feel like a neater structure would be something like this: export default { compositions: { infoComposition: { data() { return { showInfo: false } }, methods: { // info methods } ..etc.. }, productsComposition: { data() { return { products: [] } }, methods: { // products methods } ..etc.. } } } And then just keeping all template syntax as-is. Maybe I’ll come around to it after using it on a complex app.

[@MakeAppswithDanny]

Akifcan Kara thanks! 👍

[@2002budokan]

Danny do you plan more courses for Quasar? All I know you have the only quasar-course in the planet and hence in Udemy. This alone is a wonderful Quasar intro, and well choosen classic Todo-CRUD app. But I struggle whenever I want to change the boring quasar layout. For example I want a bootstrap style dropdown menu (complete drop-down of the toolbar). I've tried with q-expansion-item (accordion) but the all other elements of the toolbar, centered vertically when I've opened the expansion-item. So I've replaced it with btn-dropdown. But I use expansion-item in mobile version of the menu. I wished however a common solution for both cases, etc, etc... For such nitty-gritty details one need more Quasar tips-tricks. Quasar is the best Vue framework and need more attention.

[@MakeAppswithDanny]

Hi 2002budokan. I don’t want to hijack Max’s video. Can you please ask this on one of my videos. 👍

[@KostasOreopoulos]

There is no reason for so much boilerplate. The main reason for splitting into data and methods in the he first place was to declare everything returned by data as reactive internally. Now you can just return a simple object, with data and functions and the data are already wrapped into a function making them reactive. This api is much simpler and will greatly reduce code duplication. It can also help reduce over splitting components just because this was the only way to split functionality

[@onderogretmen]

Actually, there is no difference your solution between Max used mixins. Here is example making without using external .js files as you said. codepen.io/navi3591/pen/RwNGYEZ?editors=1011 Never searched deeply but I think, this syntax is not totally for just "make code prettier or reusable for developers", the biggest reasons are performance and typescript. I would be in love if there is a official way to make Vue.js + typescript + .net Core with SSR support from Microsoft :)

[@bhangachora]

Thanks man! This was super useful! And helpful!

[@waynehiller607]

Thanks Max, I enjoyed the video, great work.

[@PhilipAlexanderHassialis]

First course I ever bought on Udemy was your Vue course. Your excellent delivery and subject knowledge has spoiled me and now I have to compare every course I watch with yours. I hope you are aware you are the gold standard in development courses. As always, your little snippet here doesn't disappoint in the least! I wait for the Vue course to be revamped or perhaps a brand new Vue3 one from scratch! Please, do a full C# course, I would pay gladly to watch you explain and demonstrate the intricacies of the language and its core mechanics.

[@academind]

Wow, I really want to thank you for your wonderful words Philip, this means so much to me! I will update the existing Vue course once Vue 3 is final, got no plans on C# at the moment though.

[@PhilipAlexanderHassialis]

@@academind Wow, thanks a bunch for this. Also, really, when your delivery, your preparedness, your explanations and your in depth analysis is compared to the rest of the instructors out there, most of them eat your dust, for real! I mean, sure, Brad (Traversy) does a stellar job too and some others try hard, occasionally. But you present stuff from all angles and cover everything so succintly that even when something gets updated (a la React pushing for closures/hooks everywhere) the knowledge and software depth one gets from your courses allows someone to clearly stay on top of the new developments. Excellent job, excellent. P.S. reconsider C#, I am aiming to slowly study it really well and go for the certification - and I know a course by you would be the ultimate preparation for it, so I am willing to pay top euro for it - i.e. I have only two kidneys but we can talk this through :P

[@KostasOreopoulos]

The new api is great. The proxy api enables reactivity, so you do not have to declare data and functions as different object properties which is great and now can easily split data and code. I am really curious how computed is implemented under the hood, basically how that function finds out which reactive data are used inside its body. The only way I can think of is parsing the body of the function and finding out which values are passed from the closure.

[@davidzita1404]

mabey, some regx ??

[@TalalSuhail]

Great work as always !!

[@christopher5731]

I love Max's videos. The composition API seems like more arbitrary code for no real gain. I like vue for its simplicity and the ease of use and this new way just feels like more over-engineered JS

[@layou32]

Hi max, big fan here. On the first look it seems to me an organizational code upgrade, let's give it a shot. You're insame broh!!

[@kimboender7749]

Great tutorial as always!

[@brunonogues5128]

Thanks from France ! Very good explanations, I use Vue only since 2-3 months and the organization of the code is a real problem for me (go to the data, and after to methods, search where is the function corresponding to my data etc..) That's boring, and these new features are perfects for me! Sorry for my english lol

[@amitavroydev]

Great video and very nicely explained. Thanks a lot.

[@MiniOttA]

Excellent tutorial as always

[@yackawaytube]

I don't know. Using a single setUp function to do several things - create composition parts; link reactive parts together, and returning the final "data" object smell. And how does one get dependency injection to work here? The irony here is that composition problem is one of the fundamental concepts of OOP and this has been solved over 25 years ago. The twist here is one needs REACTIVE composition and even that has been solved by Reactive frameworks. This setUp approach seems to reinventing the square wheel.

[@zyadyasser196]

Thanks Max for the video 🙏

[@Dipenparmar12]

Thanks for your great efforts.

[@JoLXBR]

Amazing! Keep up the good work!

[@yves2522]

Thanks a lot, it makes me more confident to migrate to Vue3 ;-)

[@shutterradio]

Cool! Can't wait to use it in prod

[@BookOfSaints]

I love functional programming, but I agree that this is a lot for even medium sized apps. Personally, I can see the value of this if you're creating a new project knowing you will have a lot of reusable code and large components. I have definitely struggled with data readability in larger components. Otherwise, I feel that the options api is better for me. Regardless, this is an incredible addition and goes to show just how much the Vue team cares about their framework and users.

[@RorySilva]

A lot of jealous React fanboys acting like Apple fanboys (every time Android comes out with a feature). FYI: Hooks existed many years before React was created. Act like you knew.

[@anthoniG]

If I could give you more than 1 thumbs up I would

[@RorySilva]

@@anthoniG it's annoying because I just come here to learn. I definitely don't waste my time bragging about Vue over in the React forums. What good does that do?

[@anthoniG]

@@RorySilva Well people are weird lol. With some if you are not using a framework than them they get antsy. It's like Android and iOS all over again :(

[@JakobBjerrePetersen]

What about us misunderstood EmberJS fanboys? 🙄☺️

[@rorysilva7826]

@@JakobBjerrePetersen The right tool for the job! Can you solve the problem? Create a solution? In a reasonable amount of time? Go for it!

[@frontend-mastery]

감사합니다. Thank you for sharing good contents. nice explanation.

[@sandorkepiro7336]

Hi Max, an amazing tutorial (as always) I'd like to ask what do you think, is the composition API production ready already or should we rather wait until it's released in Vue 3.0?

[@johnm8358]

Awesome tutorial, one question why pass functions to child components? Thought we should use events to do this kind of thing

[@BenHayat]

If I understand composition API correctly, it can add more performance in reactivity mode due to ability to control it manually compared to Vue 2. This can be very helpful on older mobiles with less powerful CPU. One area that Svelte shines the most is in reactivity speed due to lack of VDOM and less automated DOM update.

[@ChaitanyaBhagwat]

You might want to revisit the concept of the exclamation mark :P

[@davetarantula5851]

Finally i understood what the composition api is. It's like React Hooks... don't like it, i hope i will not be forced to use it 😃 but really thank you, your explaination is clear and i really understood everything, you are the number 1!

[@ernstmayer3868]

Thanks for the introduction. Quite an interesting new mechanism. By the way, there is no need to define a 'isValid' variable within the isValid computed function. You can just return false if the conditions are matching and 'true' after all tests.

[@Akteur33]

Max, you are great teacher! Thanks and cheers from Russia =)

[@academind]

So happy to read that Alexandr! Greetings from Germany :)

[@LarsRyeJeppesen]

Pretty clear by now that the Angular team was right in making Typescript default language. Everybody else now scrambles to move in that direction 2-3-4 years later. Same with Observables and Rxjs support.

[@mrrolandlawrence]

i am way too excited for a normal healthy life about vue 3 coming out!

[@Godrose]

Okay. It looks nice

Vue devs: Vue is simpler than React Vue authors: hold my coffee... 😂

[@FilipCordas]

Devs: I don't like react I think I will use cue author's: Are you sure you really should be using react.

[@mortenfinkbuchhave641]

yeah my thoughts exactly... there goes the simplicity out the window :D

[@RorySilva]

This is optional. You can build Vue apps just like before.

[@RorySilva]

@@mortenfinkbuchhave641 It's optional

[@RorySilva]

@@FilipCordas It's optional.

[@USONOFAV]

I'm still in a wait and see for Vue in terms of creating a large and scalable enterprise application. We evaluated for Vue and Angular last year for our large application and opted to rewrite it in Angular 8 and upgraded to Angular 9.

[@mvrdara]

thanks max is vue 3 still in virtual dom or kanda like svelte

[@mpu-easy9568]

Hi Max, I am missing the link to the source code. It isn't in text below the video. Thanks!

[@arlandmv4053]

thank you!

[@olivier1116]

With this API, writing vue code now looks a lot like React with React hooks

[@wobsoriano]

and that is why I just switched to React. Because of also the work demand

[@aan3387]

Only for simple things, but if you work on something real then you'll appreciate Vue's composition API mainly because maintaining dependencies with react hooks becomes a nightmare. In my opinion the best thing about Vue is its reactivity system (which ironically doesn't exist in react), this becomes more apparent when using react hooks and comparing it with Vue's composition API. The only reason I would even consider using React instead of Vue today would either be: 1. React is more popular (has more jobs) 2. or some React only libraries which might be critical for some projects (like Drafjs or Slatejs). None of which are technically React pros or Vue cons.

[@centuxdevelopment5419]

@@aan3387 Tiptap seems like a good replacement to Slate and Draft js.

[@NatDunn219]

Looks awesome! What did you do in VS Code at 23:05 to get the return object to format nicely? Is that an extension?

[@cotkhumno1]

prettier.io/

[@crucoba]

Great tutorial, as always. Thank you.

[@haythemradhoini4076]

i really love it

[@kisisel]

Thanks for that great course! But I couldn't see the start code link below the video. Regards!

[@wordonice4457]

My jury is still out on this. I suppose when I start building much bigger apps with Vue, I will come to appreciate the composition API. Nevertheless, it is a wonderful addition to the features on Vue

[@flogginga_dead_horse4022]

This is interesting, I'm wondering how this works with Vuex though. Thanks.

[@brunonogues5128]

Yeah good question !

[@flaviokonti5522]

Only with vuex 4.0, it's in git repo separate branch

[@nyambe]

Flavio Konti I use vuex a lot. With something like this, might not need it as much

[@muhafariz]

I love you, Max

[@gamechannel1271]

Organization isn't a problem in typescript Vue applications, as everything is stored in a class with decorators used to define watchers, props, etc.

[@nyambe]

Very powerful, you can’t go back once you learn it. Is it ready for production?

[@alila3883]

very helpful

[@joshuaogunbo6454]

How do you use the composition api with Vuex

[@GuitarAge]

Great vid as usually! Thanks a lot ! But i think it's better to stick with traditional vue approach until next version release and then all the things should be at right place. Now it looks like vue2 + comp-api = (rather)pain in s.

[@LikeAndFavBF3]

Vue 3 course maybe Max, like the update to typescript you did for 2019

[@academind]

I will indeed update the existing course as soon as Vue 3 is final.

[@RailGunViolin]

Great Video Max, love your content. I have bought a couple of your courses on Udemy. Amazing contnet

[@paganaye]

sadly it did not improve your spelling.

[@kenw3249]

if you check out the source code for 3.0, they are using js meta programming Proxy

[@2002budokan]

Max you're full of action and always up to date; so thank you once more for all your great videos and your very detailed master-piece Udemy courses. I didn't like the new API. I don't think it will be a success story. You say, useful for bigger components? Well, we should fight against bigger components. When a component becomes bigger, we should refactor it. Divide it to subcomponents, js modules etc. To me the Vue is the "Love at first sting", but I don't think that the new API is necessary. Lastly, what do you think about the Danielo515's and olivier delmas comments below?

[@2002budokan]

@no1youknowz Today I'm quasi forced to use the new API, 'cause I want to implement a component with XState inside. They provide two different methods for the injection of their Machine (StateChart) into a vue component. The first one using the old API, and the second one with the new composition API. And liked the injection via setup() method. I think it will take some time to get used to it.

[@Maystro_eg]

Greetings Max. 💛

[@RobertAxelsen]

You mentioned that there is a link to the starting project below the video, but I can find nothing in the description? Is there a repo with the code anywhere?

[@johnm8358]

Will there be a point where old syntax won't be supported

[@bushbuddyplatypus]

Great tutorial (god i wish i found this stuff interesting)

[@jeremybrews2521]

A question: Will your vue 2 course be updated to vue 3 or will there be a new course?

[@academind]

The current course will be updated once Vue 3 is final.

[@aArcziMetin2]

@@academind im not into the courses anymore BUT props to you for doing that.

[@Redrivercity]

I didn't get yet what is the real advantage and difference using vue composition vs mixins. I can encapsulate all my logic and methods and separate it with mixins.

[@mikemargerum6441]

Great video. Thanks Max. At this point I may as well switch to react. The reason I chose Vue was for the syntactic magic and less ceremony code. If I'm going to treat everything like pure functions then why use Vue at all? Svelte may be a nice replacement too. Much more idiomatic IMO.

[@gaatutube]

Great overview.

[@parasou79]

Your Tutorials are very nice.kudos.Have some queries/comments 1. Passing a function to child component and executing in child scope doesn't look good to me 2. Mixins are good for vue. 3. I think you should have had a separate login component there 4. Why did vue team ignored mixin aliasing concept, instead they created this composition api? Something like an instance of that toggleMixin with a name say login and then use login.toggle() and login.show

[@fredhair]

Vue 3 looks great! I really dislike how Typescript and JavaScript work together on the web. Seems to me (coming from a static/strongly typed & compiled language background) the best advantage of strong typing should be better performance.. js should be an add on for Ts. Since we're all usually transpiling our code already we're kinda getting the worst of both worlds -_-. I really hope web assembly will help solve this crap in future. Sorry for the off topic comment! Great video nonetheless though.

[@lautarodamore2548]

Excelente

[@alisherakbaraliyev4389]

which screen recorder do you use to making your videos) I'm also want to make tutorials in my country) Uzbekistan

[@boliu5051]

great explanation!! but I am a little confused about why we don't need to return { isValid : isValid.value } at the end of ProductForm.vue setup method.

[@fooked1]

Is it possible to use the the class syntax?

[@mauricioadolfozabalarojas7134]

Thanks Max...from Bolivia :)

[@TheAlyZidan]

Max that awesome. Please make full project videos. Please please

[@DenisDontsov]

Could you provide an example how to work with $store, $router and etc, without access to this? Should I import this via `import store from './store'`?

[@danialsafaripour7847]

Hello, Where can I found starter and finished Project file?

[@ElTexMexAlex]

I didnt even know vue 3 is new, until now.

[@arturpasnik]

Hi Max Brilliant as always :) One quick question I have onMounted where event is getting data - my local LET variable is let club = reactive({}); how to set in one go variable club = data. It works if I define all properties first but I dont want that I just want pass object to let club = reactive({});

[@arturpasnik]

BTW it works IF I do: let club = reactive({ data: null }); and then in event club.data = data; BUT I dont want ot have extra club.data.id but club.id

[@noopurp123]

Hi Max, Where is the link to starter project?

[@bartekbrodzik7134]

Some time ago I stumbled upon an article , which stated you shouldn’t pass functions in props, because there are emitters for that in Vue.js. I’ve never thought about it so much, but what do you think Max? I see that you do it here in the video and I was just curious :).

[@academind]

I did it here because I'm so used to it from React. You absolutely could use an emitter - I'd argue both is fine. You just have to be consistent. I do use both, depending on the project I work on.

[@bartekbrodzik7134]

Academind thank you for an answer man! Have a great day and keep on doing such a great work :)

[@johnm8358]

is passing functions as props not considered anti pattern?

[@vahdetk]

You were not passing functions as parameters in Vue2 courses. So, why did you prefer it here: For brewity? In the absence of a Vue3 compatible Vuex? Or isn't it not an anti-pattern anymore?