Press "Enter" to skip to content

Vue.js Basics Ep. 13 – Vue 3.0 Function Based API | First Look & Refactoring



[ Vue Basics Ep. 13 ] [ Vue.js ]
# Vue 3.0 Function Based API | First Look

In anticipation for the new and improved Vue 3.0 Function Based API, this final epsiode of the Vue Basics series we will focus on getting started with the alpha release of the new API and in turn converting our mini apps over to the new syntax!

## Helpful Links

[ Functional API Docs ] – https://github.com/vuejs/vue-function-api

[ Functional API RFC ] – https://github.com/vuejs/rfcs/blob/function-apis/active-rfcs/0000-function-api.md

[ HATT Web News Guest ] – https://www.youtube.com/watch?v=AId8IX2lT1k

## TIMELINE
====================================
3:27 – Session Start
4:45 – First Look at Vue 3 Function API Docs
7:43 – Trying Out the CDN Script Import
14:24 – Introducing the Setup Function
28:11 – Importing and Installing the Vue-Function-Api via NPM
31:08 – Vue.use( plugin )
36:57 – Writing our First Vue Function API Component
39:58 – Using the Value Function for Declaring Data Properties
43:05 – Returning a New Object with our Data Inside to Use in our Vue Template
47:19 – Writing Methods Using the Vue Function API
51:49 – Passing Props to Vue Function Components
59:54 – Writing Our First Computed Property
1:08:38 – Refactoring our App.vue File Over to the Function API
1:12:37 – Refactoring the Settings Component to the Function API
1:14:32 – Importing Lifecycle Hooks from Vue
1:19:05 – Writing our First Vue Function API Lifecycle Hooks
1:22:54 – Session Wrap Up
1:29:14 – Session End
====================================

# Project Repo:
https://github.com/rabbitwerks/lcs–vue-basics/tree/ep13–session-start
Simply clone the project and install dependencies for the parent repo each mini project repos that we have written. Run npm install in each repos root folder, one level up from /src

# RabbitWerks.js Discord
https://discord.gg/P882WwD

# HTML All The Things Podcast
Check out the Podcast Here!
https://podcast.htmlallthethings.com/

# Check out DVLFE for all things Developer Clothing!
Save 25% on orders with coupon code RABBITWERKS

Home

## Music from RabbitWerks CodeBeatz Spotify Playlist

Live project work. Coding in JavaScript.
Please feel free to leave a comment or suggestion in the chat!

Thank you and Enjoy!

#vue3 #vuefunctionapi #vuejs #tutorial #livestream #basics #javascript #beginners #vue #functionbasedapi

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Joshua Ferris Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Joshua Ferris
Guest
Joshua Ferris

Starts at 3:27