Stop Using The Options API Use The Script Setup Instead With Vue.js 3

Script Setup is the best way of creating apps in Vue 3. See why here.
#shorts #vuejs #vue3

👉Check out my last video on VS Code Theme Glow How To

👉 Sign up and get free Vue cheat sheets and updates!

Need some mentoring, help with a project, get a career in tech, level up your skills? Check it out

Need to Learn Vue or Nuxt? Check out my courses below!

🗂️ 🗂️ 🗂️

Links

[saidjonrko]

even though I use vue 3 . I never use composition api. options api is much more cleaner and also you have the power to use "this".

[brandonsayring]

Don't know why so many people in these comments think composition API + script setup is more verbose than options API. Composition API is a lot cleaner with all component logic able to be oganised in the same area of the script instead of splitting it between methods, data, computed properties etc. Composibles in Vue 3 also allow you to avoid the mess of prop drilling without the need for a state management dependency.

[joffff]

I think I need to see a few more examples of it in use as the options API makes more sense to me atm

[mleite]

Options api is so organized. What is the point in having more code with ref and reactive, and using .value in almost everything. defineProps, emits, etc.. no way.. options api is better

[mleite]

Why is this a lot easier? Options API is better imo

[alexlazo]

composition api kinda, sucks attempted using for projects at work, we quickly returned to options api. Ran into too many issues with unit tests and mocking router logic and spying. Just became a pain in the ass. Plus options api is waay more organized.

[Andrey-ilrh]

Eric, in what way is it "simpler"? Don't get me wrong, I use script setup extensively but it's in no way simpler than options API, the benefits lies in other things it provides

[adriatic]

Bear in mind that script setup and Composition API way will not give you any advance over Option API. Neither in speed nor in size. It is completely a personal preference. I personally dislike forcing ways of working that are counter to the programming standards in many languages, like first declaring variables then adding methods. It is confusing, a solution looking for the problem

[Vietnamkid]

A few things I've noticed that are important to note about script setup.

Everything is scoped to the component and is not exposed to the parent unless the value is defined in the defineExpose()

script setup gets rid of the 'this' which can be good or bad depending on if the child needs a reference to the parent component 'this' attribute to access all the data

in script setup you can't define a default value for the prop. defineProps(['prop1', 'prop2']) as an example which I've found to be bad

[milesq]

Wait, I think even the official docs recommended to use options api over setup. Setup is nice for bigger, more complicated and shared logic

[AnshulKumar-dtjn]

I am having trouble with vuejs auto import in router index.js file. When i press ctrl + space it doesnot suggest component.

[muhamadaminibragimov]

For me extra script with inheritAttrs looks not good. With options syntax you can use variable in validator inside props with setup syntax you can't do this

[adityaekawade]

How is this better than options API? It was so intuitive with the options API.

[trsofttech]

im using composition api for exposing props inside in child

[zain_x_alpha]

many persons are skilled in options api so composition API is for new persons

[anthonypenna]

The composition API makes code uglier, harder to test and takes away Vue 2’s major strength: simplicity.

As much as I love Vue, Vue 3 has been a major flop, in my opinion.

[OzzyTheGiant]

This is why I will not use Composition API. Those that have embraced it are now trying to force it down our throats like it's a solution to everything, but it's not. As someone who has worked with multiple frameworks across multiple languages, this pattern of reactivity is just one big mess, something that is not displayed in other frameworks. Devs are more likely to write spaghetti code, littering functions with hard-to-read logic, when Options API provides a much more rigid, organized, cleaner approach. It's ridiculous that in the JS community we are seeing people preaching for functional programming in everything when the fact is that UI code is always best represented as objects due to the way event systems work. We should never have gone down this road, we should have enhanced Class components and made it an official standard. That's what many original Vue fans liked about this framework, and now we have been disrespected simply to cater to the junior devs who's only experience is React hooks and can't program design patterns for squat.

[Andrey-ilrh]

The gist of all comments here: people don't understand composition API, what is it for and how to use it, that's why they hate it

[hmatpin]

I'm glad composition API is optional because it's darn awful

[reltgyg]

I just released that nothing is perfect in this world