Vuetify: Make a VueJS app look good, even if you're bad at design
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.
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
*** 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!