Vuetify [Part 2 of 3]

cmdlhz’s 2019 Self-learning Story #9–2


[cmdlhz’s 2019 Self-leaching Story] Series

[JavaScript]
🌱 Net Ninja - JavaScript ES6
🌱 Net Ninja - Asynchronous JavaScript
🌱 Net Ninja - Object Oriented JavaScript
🌱 Coding Train - JavaScript ES6-ES8 (Part1, Part2)
[Regular Expressions]
🌱 Coding Train - Programming with Text
[Vue]
🌱 Net Ninja - Vue CLI3
🌱 Net Ninja - Vue JS2
🌱 Net Ninja - Vuex
🌱 Net Ninja - Vuetify (Part1, Part2, Part3)
[Python/Django]
🌱 Net Ninja - Python3
🌱 Net Ninja - Django
[Database]
🌱 SQL for Beginners
[Figma]
🌱 Design Course
🌱 Robert Bradford
🌱 ABNUX

🌱 This is the second part of my summary of Vuetify by Net Ninja on YouTube.


11) Adding Routes
12) Padding & Margin
13) Grid System (Part 1)
14) Grid System (Part 2)
15) Dummy Project Data
16) Chips
17) Sorting Projects
18) Tooltips
19) Cards
20) Avatars

[ 11. Adding Routes ]

- src
|-- views
|-- Projects.vue
|-- Dashboard.vue
|-- Team.vue
|-- router.js
  • Changed “About.vue” to “Projects.vue
  • Changed “Home.vue” to “Dashboard.vue
  • Created “Team.vue

1) src / router.js

...
import Dashboard from './views/Dashboard.vue'
import Projects from './views/Projects.vue'
import Team from './views/Team.vue'
Vue.use(Router)
export default new Router({
...
routes: [
{
path: '/',
name: 'dashboard',
component: Dashboard
},
{
path: '/projects',
name: 'projects',
component: Projects
},
{
path: '/team',
name: 'team',
component: Team
}
]
})

[ 12. Padding & Margin ]

- src
|-- views
|-- Projects.vue
|-- Dashboard.vue
|-- Team.vue
|-- App.vue

Material Design spacings can be applied using the following format: {property}{direction}-{size}.

1) src / views / Projects.vue & Dashboard.vue & Team.vue

<template>
<div class="dashboard">
<h1 class="subheading grey--text">Dashboard</h1>
<v-container class="my-5">
<p>...</p>
<p>...</p>
</v-container>
</div>
</template>

2) src / App.vue

<template>
<v-app class="grey lighten-4">
<NavBar />
<v-content class="mx-4 mb-4">
<router-view></router-view>
</v-content>
</v-app>
</template>

[ 13. Grid System (Part 1) ]

src / views / Dashboard.vue

<template>
<div class="dashboard">
<h1 class="subheading grey--text">Dashboard</h1>
<v-container class="my-5">
<v-layout row wrap>
<v-flex xs12 md6>
<v-btn outline block class="primary">ONE</v-btn>
</v-flex>
<v-flex xs4 md2>
<v-btn outline block class="primary">TWO</v-btn>
</v-flex>
<v-flex xs4 md2>
<v-btn outline block class="primary">THREE</v-btn>
</v-flex>
<v-flex xs4 md2>
<v-btn outline block class="primary">FOUR</v-btn>
</v-flex>
</v-layout>
      <v-layout row wrap justify-space-around>
<v-flex xs4 md3>
<v-btn outline block class="success">FIVE</v-btn>
</v-flex>
<v-flex xs4 md3>
<v-btn outline block class="success">SIX</v-btn>
</v-flex>
</v-layout>
</v-container>
</div>
</template>

[ 14. Grid System (Part 2) ]

src / views / Dashboard.vue

<template>
<div class="dashboard">
<h1 class="subheading grey--text">Dashboard</h1>
<v-container class="my-5">
<v-card flat class="pa-3">
<v-layout row wrap>
<v-flex xs12 md6>
<div class="caption grey--text">PROJECT TITLE</div>
<div>Create a new website.</div>
</v-flex>
<v-flex xs6 sm4 md2>
<div class="caption grey--text">PERSON</div>
<div>Jen Lim</div>
</v-flex>
<v-flex xs6 sm4 md2>
<div class="caption grey--text">DUE DATE</div>
<div>2019/7/31</div>
</v-flex>
<v-flex xs2 sm4 md2>
<div class="caption grey--text">STATUS</div>
<div>ongoing</div>
</v-flex>
</v-layout>
</v-card>
</v-container>
</div>
</template>

[ 15. Dummy Project Data ]

src / views / Dashboard.vue

<template>
<div class="dashboard">
<h1 class="subheading grey--text">Dashboard</h1>
<v-container class="my-5">
<v-card flat v-for="project in projects" :key="project.title">
<v-layout row wrap :class="`pa-3 project ${project.status}`">
<v-flex xs12 md6>
<div class="caption grey--text">PROJECT TITLE</div>
<div>{{project.title}}</div>
</v-flex>
<v-flex xs6 sm4 md2>
<div class="caption grey--text">PERSON</div>
<div>{{project.person}}</div>
</v-flex>
<v-flex xs6 sm4 md2>
<div class="caption grey--text">DUE DATE</div>
<div>{{project.due}}</div>
</v-flex>
<v-flex xs2 sm4 md2>
<div class="caption grey--text">STATUS</div>
<div>{{project.status}}</div>
</v-flex>
</v-layout>
<v-divider></v-divider>
</v-card>
</v-container>
</div>
</template>
<script>
export default {
data(){
return{
projects: [
{title:'...', person:'...', due:'...', status:'ongoing', content:'...'},
{title:'...', person:'...', due:'...', status:'complete', content:'...'},
{title:'...', person:'...', due:'...', status:'complete', content:'...'},
{title:'...', person:'...', due:'...', status:'overdue', content:'...'}
]
}
}
}
</script>
<style>
.project.complete{
border-left: 4px solid #3cd1c2;
}
.project.ongoing{
border-left: 4px solid orange;
}
.project.overdue{
border-left: 4px solid tomato;
}
</style>

[ 16. Chips ]

src / views / Dashboard.vue

<template>
<div class="dashboard">
<h1 class="subheading grey--text">Dashboard</h1>
<v-container class="my-5">
<v-card flat v-for="project in projects" :key="project.title">
<v-layout row wrap :class="`pa-3 project ${project.status}`">
...
<v-flex xs2 sm4 md2>
<div class="right">
<v-chip small :class="`${project.status} white--text caption my-2`">{{project.status}}</v-chip>
</div>
</v-flex>
</v-layout>
<v-divider></v-divider>
</v-card>
</v-container>
</div>
</template>
<script>
export default {
data(){
return{
projects: [ ... ]
}
}
}
</script>
<style>
...
.v-chip.complete{
border-left: 4px solid #3cd1c2;
}
.v-chip.ongoing{
border-left: 4px solid orange;
}
.v-chip.overdue{
border-left: 4px solid tomato;
}
</style>

[ 17. Sorting Projects ]

1) Sort by Person

2) Sort by Project Title

src / views / Dashboard.vue

<template>
<div class="dashboard">
<h1 class="subheading grey--text">Dashboard</h1>
<v-container class="my-5">
<v-layout row class="mb-3">
<v-btn small flat color="grey" @click="sortBy('title')">
<v-icon left small>folder</v-icon>
<span class="caption text-uppercase">By Project Title</span>
</v-btn>
<v-btn small flat color="grey" @click="sortBy('person')">
<v-icon left small>person</v-icon>
<span class="caption text-uppercase">By Person</span>
</v-btn>
</v-layout>
      <v-card flat v-for="project in projects" :key="project.title">
...
</v-card>
</v-container>
</div>
</template>
<script>
export default {
data(){
return{
projects: [ ... ]
}
},
methods:{
sortBy(prop){
this.projects.sort((a,b) => a[prop] < b[prop] ? -1 : 1)
}
}

}
</script>
<style>
...
</style>

[ 18. Tooltips ]

src / views / Dashboard.vue

<template>
<div class="dashboard">
<h1 class="subheading grey--text">Dashboard</h1>
<v-container class="my-5">
<v-layout row class="mb-3">
<v-tooltip top>
<v-btn small flat color="grey" @click="sortBy('title')" slot="activator">
<v-icon left small>folder</v-icon>
<span class="caption text-uppercase">By Project Title</span>
</v-btn>
<v-btn small flat color="grey" @click="sortBy('person')" slot="activator">
<v-icon left small>person</v-icon>
<span class="caption text-uppercase">By Person</span>
</v-btn>

</v-tooltip>
</v-layout>
      <v-card flat v-for="project in projects" :key="project.title">
...
</v-card>
</v-container>
</div>
</template>
<script>
...
</script>
<style>
...
</style>

[ 19. Cards ]

src / views / Team.vue

<template>
<div class="team">
<h1 class="subheading grey--text">Team</h1>
<v-container class="my-5">
<v-layout row wrap>
<v-flex xs12 sm6 md4 lg3 v-for="person in team" :key="person.name">
<v-card flat class="text-xs-center ma-3">
<v-responsive class="pt-4">
Image goes here
</v-responsive>

<v-card-text>
<div class="subheading">{{person.name}}</div>
<div class="grey--text">{{person.role}}</div>
</v-card-text>
            <v-card-actions>
<v-btn flat color="grey">
<v-icon small left>message</v-icon>
<span>message</span>
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>

</v-container>
</div>
</template>
<script>
export default {
data(){
return{
team: [
{ name: 'The Net Ninja', role: 'Web developer' },
{ name: 'Ryu', role: 'Graphic designer' },
{ name: 'Chun Li', role: 'Web developer' },
{ name: 'Gouken', role: 'Social media maverick' },
{ name: 'Yoshi', role: 'Sales guru'}
]
}
}
}
</script>

[ 20. Avatars ]

- public
|-- avatars
|-- avatar-1.png
|-- avatar-2.png
|-- avatar-3.png
|-- avatar-4.png
|-- avatar-5.png
- src
|-- components
|-- NavBar.vue
|-- views
|-- Team.vue

1) src / components / NavBar.vue

<template>
<nav>
...
<v-navigation-drawer v-model="drawer" app class="primary">
<v-layout column align-center>
<v-flex class="mt-5">
<v-avatar size="100">
<img src="avatars/avatar-1.png">
</v-avatar>
<p class="white--text subheading mt-1 text-xs-center">
Jen Lim
</p>
</v-flex>
</v-layout>
      <v-list>
...
</v-list>
</v-navigation-drawer>
</nav>
</template>
<script>
...
</script>

2) src / views / Team.vue

<template>
<div class="team">
<h1 class="subheading grey--text">Team</h1>
<v-container class="my-5">
<v-layout row wrap>
<v-flex xs12 sm6 md4 lg3 v-for="person in team" :key="person.name">
<v-card flat class="text-xs-center ma-3">
<v-responsive class="pt-4">
<v-avatar size="100" class="grey lighten-2">
<img :src="person.avatar">
</v-avatar>

</v-responsive>

<v-card-text>
...
</v-card-text>
            <v-card-actions>
...
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
<script>
export default {
data(){
return{
team: [
{ name: ..., role: ..., avatar: 'avatars/avatar-1.png' },
{ name: ..., role: ..., avatar: 'avatars/avatar-2.png' },
{ name: ..., role: ..., avatar: 'avatars/avatar-3.png' },
{ name: ..., role: ..., avatar: 'avatars/avatar-4.png' },
{ name: ..., role: ..., avatar: 'avatars/avatar-5.png' }
]
}
}
}
</script>

If you’d like to read next part of my summary of Vuetify Tutorial by Net Ninja, please visit here.

Thanks for reading! 🎵 If you like this blog post, please clap👏