VueX + LocalStorage to track video watch status (Building a VueJS app Part 4)

Published: 13 September 2019
on channel: Jeffrey Codes
7,918
148

Let’s say we get a bunch of videos on our site, and people can’t remember everything they’ve watched… well, good news! Computers are great at remembering things!

We’re going to mark videos as played — either when the video ends or when the user clicks a button — and then display that information to the user on the video watch page and on the lists of videos.

Along the way we'll learn about VueX, Localstorage, Font Awesome, and vue-video-player.

0:00 start
1:49 Displaying Played status from localstorage
8:28 Saving Played status to localstorage
12:10 Using FontAwesome
15:15 Detecting the end of video playback
16:38 Showing Played status on video lists
19:25 Ending and review


Previous video in series:    • Vuetify: Make a VueJS app look good, ...  
Next video in series:    • Video Creation Form - Text Inputs + V...  
Playlist link:    • Building a VueJS screencasting app fr...  

** Github links **

Core feature: https://github.com/jeffreybiles/vue-s...
Adding FontAwesome: https://github.com/jeffreybiles/vue-s...
Mark played when video ends: https://github.com/jeffreybiles/vue-s...
Display played status in video lists: https://github.com/jeffreybiles/vue-s...

** Notes **

If you want to know why we used the font-awesome-icon component instead of vuetify's v-icon component... well, at first it was because I didn't notice the v-icon component. But then once I did, it was because I prefer the syntax and style of the font-awesome-icon component. Short video here:    • Why not use Vuetify's icon component?...  

Thanks for watching! Be sure to like/comment/subscribe, and I’ll see you next week as we make our app even more awesome.

** Find me online! **

Twitter:   / vuescreencasts  
Website coming soon.

#VueX #Localstorage #Tutorial #VueJS #Vue #FontAwesome #Javascript #2019 #Project #WatchMeCode


Watch video VueX + LocalStorage to track video watch status (Building a VueJS app Part 4) online without registration, duration hours minute second in high quality. This video was added by user Jeffrey Codes 13 September 2019, don't forget to share it with your friends and acquaintances, it has been viewed on our site 7,91 once and liked it 14 people.