# Vuetify
# Setting up Vuetify
On a normal Vue project with the CLI:
First we install @Vue-CLI, then create the vue app then add vuetify:
npm install -g @vue/cli
or
yarn global add @vue/cli
vue create my-app
vue add vuetify
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Vuetify on Vuepress, just add the following to enhanceApp.js:
Install material design icons:
yarn add @mdi/font
yarn add material-design-icons-iconfont -D
1
2
3
2
3
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
import "material-design-icons-iconfont/dist/material-design-icons.css";
import "@mdi/font/css/materialdesignicons.css";
export default ({
Vue, // the version of Vue being used in the VuePress app
options, // the options for the root Vue instance
router, // the router instance for the app
siteData // site metadata
}) => {
Vue.use(Vuetify);
options.vuetify = new Vuetify({})
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# Icons
https://cdn.materialdesignicons.com/4.7.95/
TIP
Install Vue.js devtools as a Chrome extension
# Basics of Vue
# Creating a new Vuetify wireframe
First we choose the wireframe and copy the github code, then paste it into the App.vue.
Base wireframe:
<template>
<v-app id="inspire">
<v-navigation-drawer
v-model="drawer"
app
>
<!-- -->
</v-navigation-drawer>
<v-app-bar app>
<v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>Application</v-toolbar-title>
</v-app-bar>
<v-main>
<!-- -->
</v-main>
</v-app>
</template>
<script>
export default {
data: () => ({ drawer: null }),
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
vue create weely-report
cd weekly-report
vue add vuetify
yarn add vuex
1
2
3
4
5
6
7
2
3
4
5
6
7