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

51,911
0
Published 2022-06-27
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
   • My VS Code Glowing Theme How To #Shorts  

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

Need some mentoring, help with a project, get a career in tech, level up your skills? Check it out
👉mentorcruise.com/mentor/erikhanchett/

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

bit.ly/2LalQka - Learn Nuxt.js Course!
bit.ly/3aiYe8s - Quick Starter On Vue 3
bit.ly/2OETt0M - Full 6 Module course on vue!

🗂️ 🗂️ 🗂️

All Comments (21)
  • @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".
  • 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.
  • @mleite1
    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
  • @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
  • @mleite1
    Why is this a lot easier? Options API is better imo
  • @alexlazo7960
    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.
  • @adriatic123
    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
  • @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
  • 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.
  • @Andrey-il8rh
    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
  • 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
  • @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.
  • @wotan91
    Stop using this mess. Seriously, Vue 2 was the best thing in universe and they ruined it to the garbage point like React.
  • @Andrey-il8rh
    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
  • @AnshulKumar-dt5jn
    I am having trouble with vuejs auto import in router index.js file. When i press ctrl + space it doesnot suggest component.