Converting a Vue component to the Composition API

Рет қаралды 6,180

Күн бұрын

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! / aschmelyun
Join my newsletter, where I send out new information twice each month in the PHP, JavaScript, and Docker worlds: aschmelyun.substack.com

Пікірлер: 23

@aschmelyun 2 жыл бұрын

Check out the source for this video on GitHub: github.com/aschmelyun/video-vue-converting-composition-api

@FeolinImages 2 жыл бұрын

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

@CsabaKissColorado Жыл бұрын

Fantastic explanation. Thank you!

@jnaras 7 ай бұрын

Nice. Thanks Andrew.

@julienSibille 2 жыл бұрын

Useful, thank you !

@Chavez3d Жыл бұрын

Great job 👏

@bradledford8877 5 ай бұрын

helpful, thank you

@zenvibes_hub 2 жыл бұрын

it's very useful example thank you !

@aschmelyun 2 жыл бұрын

Thanks, glad you liked it!

@aspirinemaga 10 ай бұрын

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

@muhammadhamzaawan4504 2 жыл бұрын

Composition API well understood thanks ❤️

@aschmelyun 2 жыл бұрын

I'm glad you understand it now!

@Quynn-Oneal 2 жыл бұрын

13:34 what if I need to use user property inside totalCost computed property above? do I need to move totalCost below the user?

@aschmelyun 2 жыл бұрын

Nope! One of the beauties of the setup method (including script setup) is that everything you export is available to each other at runtime, regardless of position. See this example: bit.ly/3sLmbhF

@VF7RM Жыл бұрын

👏👏👏

@tingtingjoanaling2114 Жыл бұрын

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

@facuagueria 2 жыл бұрын

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

@aschmelyun 2 жыл бұрын

Sure thing! I’ll add that to my list of ideas

@CsabaKissColorado Жыл бұрын

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

@Troy-ol5fk 2 жыл бұрын

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

@aschmelyun 2 жыл бұрын

This is on my to-do list and I will have a video for it in a few weeks!

@xtraszone Ай бұрын

Didn't need to import defineProps

@HadayatNiazi-xp1fz 4 ай бұрын

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 www.youtube.com/@LaravelLover