Why You Don't Need The Vue.js 3 Composition API! Composition API vs Options API Vue.js 3 comparision 

👉 Sign up and get free Vue cheat sheets and updates! www.vuecourse.tech/

Having worked with both Options API and Composition API, I have fallen in love with Composition API with script setup. Using it with TS, and JS is ❤ again! 😊

Maybe it's because I'm so comfortable with it, but I really like the Vue.js 2 way of doing things. It forces developers to be organized. And yeah, I know that's what turns a lot of devs off of Vue 2. But it's what I like about it.

Composition API in my opinion feels clean and natural. I much prefer it compared to Options. In the end it is up to you which one you are more comfortable with.

I got into vusejs because the options api seemed less complex than react. Now having built a number of applications with react, the composition api in vuejs makes me just want to develop using react.

The only thing I do miss going from the Options API to Composition is inheritance. I miss being able to "classically" extend a component to a child component, and I've never been a fan of composing my extensions. The ability to extend components like that was the main reason I went from React to Vue, and the Composition API in Vue seems like it's trying to follow React's paradigm. Granted, Vue's Composition API is far less hacky than React's Hooks API, but it still feels like Vue is just trying to be more like React for the sake of being more like React. One thing you left out -- Pinia primarily works with the Composition API (specifically the setup() function). It'll work with the Options API, but integration is much simpler with setup(). At least, it was for me. So, if you're planning to use Vuex's replacement or start a Nuxt 3 project, it's likely you're better off going the Composition route.

This was really helpful, since I'm somewhat a beginner with Vue and didn't get the full meaning of the APIs. Maybe you want to do an (even) shorter video stating just the basics and maybe referring to this one. I could imagine people watching it just to get the APIs.

Could you explain how to build and more importantly test services using composition API? Would you even put business logic in composable "services" in a non trivial prod app?

Don't know if anybody else pointed this out already, but using the hybrid approach you can actually access the refs and functions returned by the setup method in your options API code just fine by using "this".

As someome relatively new to Vue, the options API feels more approachable and intuitive to use. And more organised.

Nice videos ! Very helpful to refactor my projects :) I’ve seen that you were offering mentoring before is it still a thing ? Cause I would be very interested

After fiddling for a bit with TS+ESLint with the Options API I came to the conclusion that this particular config is unusable (lots of false positives involving `this` keyword being undefined) I went head on for Composition API and never looked back.

Thank you. It's very useful for me

Always options api easy organised and the very reason why i fell in love with vue,

What theme do u use for vscode?

thank you for this awesome video ❤

Can we get a video on fetching with nuxt 3?

What the heck, how do you get glowing syntax?? That color scheme is awesome

Composition API: When multiple components need the same ancestor data, or when a deeply nested component needs ancestor data Options API: When a child component needs parent data

what plugin do you use to get certain keywords to glow in this neon style?

finally....! thanks for saying this... i was so sick of people saying composition api is going to "replace" options api...

What about #5 - JSX like approach and #6 - render functions?

Honestly, just for the TS support the composition API is worth it.

I do not see return object in Setup API #3

Web3 with Vue would be amazing!

This video doesn’t talk about why we don’t need the composition API, it actually recommends it. The title is wrong.

Too many ways to do the same thing. This will really mess up the ecosystem

what is code editor theme name?

web 3 ? YEAH ABSOLUTELY!!...a solana app would be awesome!

Options API has always been more readable but YOU MISS ONE BIG ASSET of the composition API imho: you expose only what you need to the template, hence not polluting it with your intermediate computed (since VueJS Guidelines tells us to make as many atomic computed properties as possible). Thoughts?

I really love the script setup syntax: it's verbose, but explicit. All the magic Vue does in background with the Option API is gone. There's only one issue I'm trying to solve, with Volar and the strong typing of components; how to chain $attrs but keep Volar happy with the typings: how to declare that I want to chain a Prop or Event without redeclaring it multiple times.

What works best for me especially when we're a team of ten plus developers is writing class based components. Typescript + Vue-property-decorator + Vue.js 3 has been nothing but a delight for us. The backend developers love to work on the front end too!

6:25 t-i-h-i-s 😂

Can you still use TypeScript class syntax with Vue 3?

Options API is organized and I believe that's more important

Web3 web3 web3 !!

There are 5 ways to run Vue ......... what we need is a new way to rule them all and unify! .................. there are now 6 ways to run Vue ......

After React hooks, Vue does not seem better than React. I think Vue didn't need to evolve into V3. V2 was just perfect. They should've just added TS to V2

In my experience., if your creating child component and u want to access its functions or variable using ref, dont use script setup,, use setup() function or the options API... for setup() function, u can only access variables/functions that are returned.

Options API gets very ugly when you lots of large components, I personally prefer Composition API

There are 0 reasons to use OptionsAPI.

Erick, don't put this title, composition API it's the way to go. Errrrr....