Converting a Vue component to the Composition API

Published: 19 May 2022
on channel: Andrew Schmelyun
6,324
219

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: https://aschmelyun.substack.com


Watch video Converting a Vue component to the Composition API online without registration, duration hours minute second in high quality. This video was added by user Andrew Schmelyun 19 May 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 6,324 once and liked it 219 people.