Converting a Vue component to the Composition API

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

[FeolinImages]

This real-life example is excellent also for those who are just learning Vue. Any interaction with Laravel would be great too.

[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?

[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...

[tingtingjoanaling]

Hi, may i know how can use this.$set inside vue composition api?

[zenvibes_hub]

it's very useful example thank you !

[muhammadhamzaawan]

Composition API well understood thanks ❤️

[facuagueria]

Is a very good example! Can you do any video using Vuex and composition API? Thank you!

[CsabaKissColorado]

Can you please make a video about life-cycle hooks?

[Troy-olfk]

please make a video about testing vue components with jest or cypress

[xtraszone]

Didn't need to import defineProps

[HadayatNiazi-xpfz]

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.