Skip to content

Commit ba1ee28

Browse files
johnnymillerghjohnnymillergh
committed
feat($Vuetify): integrate Vuetify
https://github.com/vuetifyjs/vuetify/releases/latest BREAKING CHANGE: Vuetify integration
1 parent d9f3d74 commit ba1ee28

File tree

9 files changed

+179
-90
lines changed

9 files changed

+179
-90
lines changed

‎.eslintignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
build/*.js
2+
src/assets
3+
public
4+
dist

‎package.json‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,15 @@
99
"lint": "vue-cli-service lint"
1010
},
1111
"dependencies": {
12+
"@mdi/font": "4.7.95",
1213
"core-js": "^3.4.3",
13-
"vue": "^2.6.10",
14-
"vue-class-component": "^7.0.2",
15-
"vue-property-decorator": "^8.3.0",
16-
"vue-router": "^3.1.3",
17-
"vuex": "^3.1.2"
14+
"roboto-fontface": "*",
15+
"vue": "2.6.11",
16+
"vue-class-component": "7.1.0",
17+
"vue-property-decorator": "8.3.0",
18+
"vue-router": "3.1.3",
19+
"vuetify": "2.1.15",
20+
"vuex": "3.1.2"
1821
},
1922
"devDependencies": {
2023
"@types/jest": "^24.0.19",
@@ -32,10 +35,12 @@
3235
"eslint-plugin-vue": "^5.0.0",
3336
"lint-staged": "^9.4.3",
3437
"node-sass": "^4.12.0",
38+
"sass": "^1.19.0",
3539
"sass-loader": "^8.0.0",
3640
"typescript": "~3.5.3",
3741
"vue-cli-plugin-vuetify": "^2.0.2",
38-
"vue-template-compiler": "^2.6.10"
42+
"vue-template-compiler": "^2.6.10",
43+
"vuetify-loader": "^1.3.0"
3944
},
4045
"gitHooks": {
4146
"pre-commit": "lint-staged"

‎src/App.vue‎

Lines changed: 32 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,38 @@
11
<template>
2-
<div id="app">
3-
<div id="nav">
4-
<router-link to="/">Home</router-link>
5-
<span>|</span>
6-
<router-link to="/about">About</router-link>
7-
</div>
8-
<router-view/>
9-
</div>
2+
<v-app>
3+
<v-app-bar app color="primary" dark>
4+
<div class="d-flex align-center">
5+
<v-img alt="Vuetify Logo" class="shrink mr-2" contain
6+
src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png" transition="scale-transition"
7+
width="40"/>
8+
<v-img alt="Vuetify Name" class="shrink mt-1 hidden-sm-and-down" contain min-width="100"
9+
src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png" width="100"/>
10+
</div>
11+
<v-spacer/>
12+
<v-btn href="https://github.com/vuetifyjs/vuetify/releases/latest" target="_blank" text>
13+
<span class="mr-2">Latest Release</span>
14+
<v-icon>mdi-open-in-new</v-icon>
15+
</v-btn>
16+
</v-app-bar>
17+
<v-content>
18+
<HelloWorld/>
19+
</v-content>
20+
</v-app>
1021
</template>
1122

12-
<style lang="scss">
13-
#app {
14-
font-family: 'Avenir', Helvetica, Arial, sans-serif;
15-
-webkit-font-smoothing: antialiased;
16-
-moz-osx-font-smoothing: grayscale;
17-
text-align: center;
18-
color: #2c3e50;
19-
}
23+
<script lang="ts">
24+
import Vue from 'vue'
25+
import HelloWorld from './components/HelloWorld.vue'
2026
21-
#nav {
22-
padding: 30px;
27+
export default Vue.extend({
28+
name: 'App',
2329
24-
a {
25-
font-weight: bold;
26-
color: #2c3e50;
30+
components: {
31+
HelloWorld
32+
},
2733
28-
&.router-link-exact-active {
29-
color: #42b983;
30-
}
31-
}
32-
}
33-
</style>
34+
data: () => ({
35+
//
36+
})
37+
})
38+
</script>

‎src/assets/logo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/HelloWorld.vue‎

Lines changed: 97 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,103 @@
11
<template>
2-
<div class="hello">
3-
<h1>{{ msg }}</h1>
4-
<p>
5-
For a guide and recipes on how to configure / customize this project,<br>
6-
check out the
7-
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
8-
</p>
9-
<h3>Installed CLI Plugins</h3>
10-
<ul>
11-
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12-
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
13-
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
14-
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
15-
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
16-
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest" target="_blank" rel="noopener">unit-jest</a></li>
17-
</ul>
18-
<h3>Essential Links</h3>
19-
<ul>
20-
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
21-
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
22-
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
23-
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
24-
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
25-
</ul>
26-
<h3>Ecosystem</h3>
27-
<ul>
28-
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
29-
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
30-
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
31-
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
32-
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
33-
</ul>
34-
</div>
2+
<v-container>
3+
<v-layout text-center wrap>
4+
<v-flex xs12>
5+
<!--suppress HtmlUnknownTarget -->
6+
<v-img :src="require('../assets/logo.svg')" class="my-3" contain height="200"/>
7+
</v-flex>
8+
<v-flex mb-4>
9+
<h1 class="display-2 font-weight-bold mb-3">Welcome to Vuetify</h1>
10+
<p class="subheading font-weight-regular">
11+
For help and collaboration with other Vuetify developers,<br>
12+
please join our online
13+
<a href="https://community.vuetifyjs.com" target="_blank">Discord Community</a>
14+
</p>
15+
</v-flex>
16+
<v-flex mb-5 xs12>
17+
<h2 class="headline font-weight-bold mb-3">What's next?</h2>
18+
<v-layout justify-center>
19+
<a v-for="(next, i) in whatsNext" :key="i" :href="next.href" class="subheading mx-3" target="_blank">
20+
{{ next.text }}
21+
</a>
22+
</v-layout>
23+
</v-flex>
24+
<v-flex xs12 mb-5>
25+
<h2 class="headline font-weight-bold mb-3">Important Links</h2>
26+
<v-layout justify-center>
27+
<a v-for="(link, i) in importantLinks" :key="i" :href="link.href" class="subheading mx-3" target="_blank">
28+
{{ link.text }}
29+
</a>
30+
</v-layout>
31+
</v-flex>
32+
<v-flex xs12 mb-5>
33+
<h2 class="headline font-weight-bold mb-3">Ecosystem</h2>
34+
<v-layout justify-center>
35+
<a v-for="(eco, i) in ecosystem" :key="i" :href="eco.href" class="subheading mx-3" target="_blank">
36+
{{ eco.text }}
37+
</a>
38+
</v-layout>
39+
</v-flex>
40+
</v-layout>
41+
</v-container>
3542
</template>
3643

3744
<script lang="ts">
38-
import { Component, Prop, Vue } from 'vue-property-decorator'
45+
import Vue from 'vue'
3946
40-
@Component
41-
export default class HelloWorld extends Vue {
42-
@Prop() private msg!: string;
43-
}
44-
</script>
47+
export default Vue.extend({
48+
name: 'HelloWorld',
4549
46-
<!-- Add "scoped" attribute to limit CSS to this component only -->
47-
<style scoped lang="scss">
48-
h3 {
49-
margin: 40px 0 0;
50-
}
51-
ul {
52-
list-style-type: none;
53-
padding: 0;
54-
}
55-
li {
56-
display: inline-block;
57-
margin: 0 10px;
58-
}
59-
a {
60-
color: #42b983;
61-
}
62-
</style>
50+
data: () => ({
51+
ecosystem: [
52+
{
53+
text: 'vuetify-loader',
54+
href: 'https://github.com/vuetifyjs/vuetify-loader'
55+
},
56+
{
57+
text: 'github',
58+
href: 'https://github.com/vuetifyjs/vuetify'
59+
},
60+
{
61+
text: 'awesome-vuetify',
62+
href: 'https://github.com/vuetifyjs/awesome-vuetify'
63+
}
64+
],
65+
importantLinks: [
66+
{
67+
text: 'Documentation',
68+
href: 'https://vuetifyjs.com'
69+
},
70+
{
71+
text: 'Chat',
72+
href: 'https://community.vuetifyjs.com'
73+
},
74+
{
75+
text: 'Made with Vuetify',
76+
href: 'https://madewithvuejs.com/vuetify'
77+
},
78+
{
79+
text: 'Twitter',
80+
href: 'https://twitter.com/vuetifyjs'
81+
},
82+
{
83+
text: 'Articles',
84+
href: 'https://medium.com/vuetify'
85+
}
86+
],
87+
whatsNext: [
88+
{
89+
text: 'Explore components',
90+
href: 'https://vuetifyjs.com/components/api-explorer'
91+
},
92+
{
93+
text: 'Select a layout',
94+
href: 'https://vuetifyjs.com/layout/pre-defined'
95+
},
96+
{
97+
text: 'Frequently Asked Questions',
98+
href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions'
99+
}
100+
]
101+
})
102+
})
103+
</script>

‎src/main.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,15 @@ import Vue from 'vue'
22
import App from './App.vue'
33
import router from './router'
44
import store from './store'
5+
import vuetify from './plugins/vuetify'
6+
import 'roboto-fontface/css/roboto/roboto-fontface.css'
7+
import '@mdi/font/css/materialdesignicons.css'
58

69
Vue.config.productionTip = false
710

811
new Vue({
912
router,
1013
store,
14+
vuetify,
1115
render: h => h(App)
1216
}).$mount('#app')

‎src/plugins/vuetify.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import Vue from 'vue'
2+
import Vuetify from 'vuetify/lib'
3+
4+
Vue.use(Vuetify)
5+
6+
export default new Vuetify({
7+
theme: {
8+
options: {
9+
customProperties: true
10+
},
11+
themes: {
12+
light: {
13+
primary: '#ee44aa',
14+
secondary: '#424242',
15+
accent: '#82B1FF',
16+
error: '#FF5252',
17+
info: '#2196F3',
18+
success: '#4CAF50',
19+
warning: '#FFC107'
20+
}
21+
}
22+
}
23+
})

‎tsconfig.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
"baseUrl": ".",
1414
"types": [
1515
"webpack-env",
16-
"jest"
16+
"jest",
17+
"vuetify"
1718
],
1819
"paths": {
1920
"@/*": [

‎vue.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
'transpileDependencies': [
3+
'vuetify'
4+
]
5+
}

0 commit comments

Comments
 (0)