In this tutorial we’re going to take a functional but ugly app and turn it into a beautiful app — or, at the very least, one that’s less ugly — using Vuetify, a Material Design library for VueJS.

0:00 Start
1:00 Why Vuetify?
4:36 Installing Vuetify
11:00 Fixing the Video List
34:10 Fixing the Video Watch page

Specifically, we’re going to cover creating a navbar, improving button style and interaction (such as @mousedown events), using the inbuilt style classes (including color), using a bootstrap-style rows/columns layout, and using a cards layout.

Previous video in series: https://www.youtube.com/watch?v=9xF89Q2052g
Next video in series: https://youtu.be/WOv3w2tSp-Y
Playlist: https://www.youtube.com/playlist?list=PLPwpWyfm6JADRf8x1Jc0Da8R71WJyt-Jn

*** Github links ***

* Installing Vuetify: https://github.com/jeffreybiles/vue-screencasts/commit/7dc25a58a1142d0d3489dd7ca35612d8be9f3c21
* Making nice buttons and header: https://github.com/jeffreybiles/vue-screencasts/commit/db7084454c5a6b22489b330b47ec30778f37c45a
* Turning videos into cards: https://github.com/jeffreybiles/vue-screencasts/commit/2e4496fb7ccdb56997e8ff201870bf51d126534e
* Vuetifying the video watch page: https://github.com/jeffreybiles/vue-screencasts/commit/8d6f0cc2336a66b16e70a010c066377d9f52dd76

I hope you enjoy, and please continue to like/comment/subscribe! Your comments so far have been both helpful and encouraging!

*** Find me online! ***

Twitter: https://twitter.com/VueScreencasts
Website coming soon.

#Vuetify #VueJS #Tutorial #UIFrameworks #Vue #2019 #Javascript

source

Read also >>  Add CSV Excel Export Button in Laravel Yajra Datatable

LEAVE A REPLY

Please enter your comment!
Please enter your name here