Composition API vs. Options API - One API to Rule Them All?!
Вставка
- Опубліковано 9 лип 2024
- 💪 This week was a lot of discussion about the two Vue APIs - the Composition and the Options API - on Social Media. Thus, I took some time to assess the shared thoughts + discussions and also went a step further: I asked you why you prefer the Options API and wanted to figure out pain points you have with the Composition API.
The results are all distilled in this video, including what the Vue team and Evan say about the API topic, how the future might look like and my personal opinion (at the very end).
Important Disclaimer: I am not part of the Vue core team (but the Nuxt team). I researched all quotes and facts with care, links are commonly below to the topics, tweets and posts!
#vuejs
---
Links
🔗 FREE VueSchool Composition API Course - vueschool.io/courses/vue-js-f... *
🔗 Justin’s Proposal x.com/jpschroeder/status/1797...
🔗 Justin Doubling Down x.com/jpschroeder/status/1798...
🔗 Vue Docs on deprecating Options API vuejs.org/guide/extras/compos...
🔗 Evan Clarifying CAPI vs OAPI x.com/youyuxi/status/17985422...
🔗 Vue Docs - Why Composition API? vuejs.org/guide/extras/compos...
🔗 Unplugin for script setup github.com/unplugin/unplugin-...
🔗 Cory House SOC x.com/housecor/status/1256348...
🔗 Infographic Vue SOC OAPI img.lichter.io/infographics/v...
🔗 Infographic Vue SOC CAPI img.lichter.io/infographics/v...
🔗 Infographic Vue SOC Both img.lichter.io/infographics/v...
📺 Organizing Code with the Composition API • Organize your Composit...
📺 You probably use useFetch wrong • You are using useFetch...
📺 @DejaVueFm Episode 011 about Learning new Vue Features • DejaVue #E011 - Learni...
Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up!
🌐 Connect further:
Website: www.lichter.io
Twitter/X: / thealexlichter
Twitch: / thealexlichter
---
Chapters
00:00 Intro
00:39 Should People Learn the Options or Composition API?
01:39 Will the Options API Go AWAY?
05:17 Why NOT Using the Composition API?
05:44 Argument One: Legacy
07:55 Argument Two: Compatibility
08:39 Argument Three: Reactivity
11:20 Argument Four: Structure / Messy Code
13:45 Separation of Concerns
17:56 Further Benefits of the Composition API
19:50 The Ecosystem
21:24 My Personal Opinion
24:39 Summary
---
Notice
Links marked with * are affiliate links. I get a small commission when you register for the service through our link. This helps to keep the UA-cam channel running. I only include affiliate links for services mentioned in the video which I use myself and/or vouched! - Наука та технологія
Which API do you prefer, Composition or Options API, and why?
Composition API because of its flexibility ❤
been told that the push for Composition API is the biggest blunder of maintainers so far, and quite a good reason to leave the framework, albeit with some tears
@mnjammnjamm would you agree to what you’ve been told? 👀
IMO the CAPI was a good decision even though „adding it“ was a major change for the ecosystem and users (and still is)
If you care about clean, organized, SOLID code then only the Composition API
vue with composition, pinia with option
Amazing video! And I totally agree with your opinion. Composition API is the way to go, for all the reasons, though it's less intuitive design wise compared to options api. That's why I'd like some more videos about some design patterns and architectures, like the one you made about inline composables, that was really helpful.
Thanks for your feedback Ali!
Then I can definitely recommend one of the latest DejaVue episodes where Michael and I talk about more Design Patterns in Vue! ua-cam.com/video/nxb_cthLg1k/v-deo.html
@@TheAlexLichter I actually did and absolutely loved it! Keep it going bro ❤️
It was hard to move to Composition API initially coming from Nuxt2. But If ur starting fresh, 110% Composition API
Do you like CAPI more by now?
Alex, your videos just continue to get better. Keep up the great work!
Thank you a ton Mike! Doing my best to cover interesting topics and helping devs all around the world 🙏
Brother, I have been working with vue since version 2.1.17 and the truth is that this API composition is great, it helps me to modulate my applications better, so I do have a doubt because nuxt did think about modules because its folders are not modular but well the framewrok I think it's great, greetings and success.
Have a look at Nuxt layers! That’s the modularity you want for Nuxt ua-cam.com/video/fr5yo3aVkfA/v-deo.htmlsi=D3aqItMg-0IFAhuj
My greatest fear is that not enough people will like these videos and @theAlexLichter will stop making them. These are all so helpful and accessible.
Thank you so much 🙏🏻
The best way to avoid that is sharing the video with your peers of course! 🙊
And comments like these + becoming a member also keep me going as well as paying the bills 🔥
Hello Alex, I never comment you UA-cam except it really helped me. Your videos are great! Even after 4 years of Nuxt development, especially in Nuxt 3 I learned some things from you. Great video and well structured, you come to the point and I do not need to skip a hundred times to get to the important part. I love your work here!
Thank you so much Maurice 🙏🏻 I highly appreciated that you took the time and effort to comment and am really glad that my videos help you and are "on point" 👏🏻💚
If you have a specific topic request, please let me know! ☺️
@@TheAlexLichter Indeed I would have 2 cool or interesting topics.
What I see often people struggling with (new Nuxt.js programmers) is the distinction between client and server side authentication and authorization. Maybe a video to that and how to handle the Nuxt client, as well the server middleware to make your API calls secure and not only rely on client based auth and permission check. A real deep dive.
The 2nd: A short overview of an example app of Nuxt 3 + Supabase, with Self Hosting Coolify on a server your choise (gcl, aws or digitalocean). This is mighty and I am gonna use that on a big production project soon, as Netlify was sadly not an option anymore for us on this specific project.
Cheers,
Maurice
Thanks for the requests! Auth is definitely on the list but needs a bit more research/work.
Example app with that stack might be the case for a future project 👍🏻
First have to finish my association manager though
I get to know vue directly with the composition API and love it easy to understand and follow, and after I get work in a project using options API and although I did understand how it works it just didn't feel right i5 was like something was missing😅
So I keep with composition API and if I need to use something that is options then just adapt it if possible😊
Sounds reasonable! But good that you now have experience with both APIs and can use them ✨
I switched to Composition API when it was possible. The Options API was ok as a start and my first Vue / Nuxt projects were also quite small. But when you work on larger projects that you maintain and expand for a long time, you need a flexible API. I mean, who wants to work with mixins or renderless components to share logic these days? Nuxt layers are the logical further development of the flexible concept.
Even if there is no customer value added, I think it is still a smart move to rewrite your components to composition. First of all because you learn something, removing some potential technical depth and you help your future colleagues/self. With Copilot it's done very quickly anyway ;).
From a dev perspective definitely a good thing to learn. But from a business-perspective, there are often more important tasks. And new components can always be started in CAPI 😊
Mixins were the straw that broke the camel's back for me. I was happy with options api until I had to start using a few mixins around the place. The torture that are mixins is what drove me to composition api.
Your expanations really help Alex!
Недавно смотрела сериал "Во все тяжкие" (Breaking Bad). В нем были серии под названием "Полумера" и "Полная мера". Попытки документации усидеть на двух стульях, в начале предлагать изучить "Options Api" и отказываться признавать его устаревшим, по моему мнению, вредят vue.
---------
I recently watched the TV series Breaking Bad. It had series called "Half Measure" and "Full Measure". Attempts by the documentation to sit on two chairs, at the beginning to offer to study the "Options Api" and refuse to recognize it as outdated, in my opinion, harm vue.
I marked components not using script setup as code smell in vue mess detector. That is my opinion
I used both and Comp API is clear winner. There is no need to argue.
One big advantage of Option API over Composition API is the possibility to derive from other components.
You mean via extends?
You are the best, thanks .
Can you make videos about GraphQl Api with nuxt 3 .
Thank you 🙏
You mean *consuming* GraphQL or building your own resolvers etc etc?
i thought i preferred options until i took the time to learn composition. haven't used options since.
hey, can You make a guide on how to create a full stack application with a database (e.g. mySQL) using Nuxt and Nitro? I would like to start using Nitro, but it is not very popular and it is difficult to find good guides
Not planning a full guide but definitely looking into db0 in an upcoming video! Until then, I am *building* a project on stream / via VOD which is a real-life one using NuxtHub (SQLite DB, Storage etc. etc.) @ ua-cam.com/video/mPYIgr95mQw/v-deo.html
@@TheAlexLichter Thank you so much
Sidenote: The video chapters are wrong. You probably copypaste them from the last video? I see the "Building a SPA" chapters
Thanks! Fixed it a little bit ago 😊
Composition API is the future tbh
Definitely! Just having a look at Vapor mode which is CAPI-only shows that too. But the Options API itself will be around for a bit longer
Vue Vapor Will be Composition only for now, remember that!
That’s correct! 👍🏻
The only people that like the options API are the ones who haven’t tried or used the composition API lol
I was actually surprised how many people still prefer the Options API! The Reddit posts are really interesting to read on that note. And I still think for learning/getting into Vue it is the best way (but you need both APIs in any case IMO)
@@TheAlexLichter Hmm that is pretty interesting! I started in Vue2 with options before moving to composition so maybe I am bias haha. Although, I feel like if I learned Vue today the composition API would be way more intuitive than the options API.
I love your videos, however your camera is too high and too close. You seem to be trapped underwater and constantly trying to breathe
Thanks a lot! Trying to adjust that for a bit now, the lack of depth in the room is tricky for that.
And my posture doesn’t help either 🙈
Anoying bit about Options API is "this."
Oh yes. Every bit of it 😁