Converting a Vue component to the Composition API

Andrew Schmelyun
Andrew Schmelyun
6,005
0
Published 2022-05-19
In this 14 minute video, I'll walk you through as I convert an existing Vue component from the Options API to the newer Composition API. I created a basic e-commerce shopping cart with the Options API, containing props, methods, and computed properties. In this high-level overview, I transform that component to use the Composition API, which has a drastically different code structure (but one that I think you'll enjoy).

You'll learn:

- What script setup does
- The difference between ref and reactive
- How to create methods and computed properties
- Why to switch to the Composition API

- 0:00 Intro
- 02:10 Getting started with setup()
- 03:33 Introducing ref and reactive
- 05:11 Using script setup
- 06:32 Including props
- 07:02 Adding methods
- 09:22 Including computed properties
- 11:38 Why use the Composition API
- 14:09 Wrapping up

Follow me on Twitter! twitter.com/aschmelyun

Join my newsletter, where I send out new information twice each month in the PHP, JavaScript, and Docker worlds: aschmelyun.substack.com/
All Comments (18)
  • @FeolinImages
    This real-life example is excellent also for those who are just learning Vue. Any interaction with Laravel would be great too.
  • @aspirinemaga
    Extremely helpful video, thanks for explanation! I watched it because I'm pushed by community and forced to learn yet again something new instead of being productive and work on my tasks. Everything was achievable with Options API (O), and I still see no reasonable tradeoff to spent time learning something new, which doesn't really help. You are showing a perfectly organized code of (O), but representing it like it's not organized at all. There is a very high chance that you started to work with Vue.js 2 (O) because of how easy and nicely organized it was back then, now it's a big mess with those C api...
  • @Quynn-Oneal
    13:34 what if I need to use user property inside totalCost computed property above? do I need to move totalCost below the user?
  • @CsabaKiss69
    Can you please make a video about life-cycle hooks?
  • @facuagueria
    Is a very good example! Can you do any video using Vuex and composition API? Thank you!
  • @Troy-ol5fk
    please make a video about testing vue components with jest or cypress
  • @HadayatNiazi-xp1fz
    Love the way of your teaching, everything is clear, I came from the Vue option API and want to switch to the setup API. I was struggling to search real example and your video came and solved my problem. I am also tutoring Laravel and Vuejs on my channel youtube.com/@LaravelLover