Vue 3: Refactor Component in Options API to Composition API

Dan Vega
Dan Vega
2,641
0
Published 2020-03-18
In this tutorial, you are going to learn how to use the Composition API by refactoring a Vue Single File component that was written using the Options API.

When you have completed this tutorial you should understand:
✅ Create a Vue 3 application using the Vue CLI
✅ Add the Vue CLI vue-next plugin
✅ Single File Component using Options API
✅ Refactor Component using Composition API

🔗Resources & Links mentioned in this video:

Source Code: github.com/danvega/openbrewery-composition-api-ref…
Composition API Reference: vue-composition-api-rfc.netlify.com/api.html
Ray Camden's Article: www.raymondcamden.com/2018/02/08/building-table-so…
Vue 3: Smaller, Faster & Stronger:    • Vue 3: Smaller, Faster & Stronger. A ...  
Vue 3: Ref vs Reactive:    • Vue 3 Composition API: Ref vs Reactive  

👋🏻Connect with me:
Website: www.danvega.dev/
Twitter: twitter.com/therealdanvega
Github: github.com/danvega
Instagram: www.instagram.com/thedanvega
LinkedIn: www.linkedin.com/in/danvega
Coffee & Code: www.danvega/dev/newsletter

SUBSCRIBE TO MY CHANNEL: bit.ly/2re4GH0
All Comments (8)
  • @DanVega
    Have you had a chance to use the Composition API? Are you interested in learning it? If not, what is holding you back?
  • @petrptacek4036
    Hi, very nice set of video contents. I am happy, than I can see the patterns in actions, it hepls me in my job and upgrade my skills. ;)
  • @premn2700
    I'm newbie to javascript - Want to go direct to v3. I want to create a site with menu bar & multiple tabs (router?) Is there a V3 example that shows such real-life use-case?
  • @heyyy4987
    little update, for vue ^3.0.0.-0 change watch: import { ref, reactive, computed, watchEffect } from 'vue'; watchEffect ( async () => {...