Skip to content

Commit cf8286b

Browse files
rockstarr-programmerrrockstarr-programmerr
committed
add vuetify
1 parent cf7d164 commit cf8286b

File tree

12 files changed

+342
-134
lines changed

12 files changed

+342
-134
lines changed

‎package.json

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"vue-class-component": "^7.2.3",
1717
"vue-property-decorator": "^9.1.2",
1818
"vue-router": "^3.2.0",
19+
"vuetify": "^2.4.0",
1920
"vuex": "^3.4.0"
2021
},
2122
"devDependencies": {
@@ -42,9 +43,11 @@
4243
"eslint-plugin-promise": "^4.2.1",
4344
"eslint-plugin-standard": "^4.0.0",
4445
"eslint-plugin-vue": "^6.2.2",
45-
"sass": "^1.26.5",
46-
"sass-loader": "^8.0.2",
46+
"sass": "~1.32.0",
47+
"sass-loader": "^10.0.0",
4748
"typescript": "~4.1.5",
48-
"vue-template-compiler": "^2.6.11"
49+
"vue-cli-plugin-vuetify": "~2.4.3",
50+
"vue-template-compiler": "^2.6.11",
51+
"vuetify-loader": "^1.7.0"
4952
}
5053
}

‎public/index.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
<!DOCTYPE html>
2-
<html lang="">
2+
<html lang="en">
33
<head>
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
77
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
88
<title><%= htmlWebpackPlugin.options.title %></title>
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
911
</head>
1012
<body>
1113
<noscript>

‎src/App.vue

Lines changed: 51 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,56 @@
11
<template>
2-
<div id="app">
3-
<div id="nav">
4-
<router-link to="/">Home</router-link> |
5-
<router-link to="/about">About</router-link>
6-
</div>
7-
<router-view/>
8-
</div>
9-
</template>
2+
<v-app>
3+
<v-app-bar
4+
app
5+
color="primary"
6+
dark
7+
>
8+
<div class="d-flex align-center">
9+
<v-img
10+
alt="Vuetify Logo"
11+
class="shrink mr-2"
12+
contain
13+
src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
14+
transition="scale-transition"
15+
width="40"
16+
/>
17+
18+
<v-img
19+
alt="Vuetify Name"
20+
class="shrink mt-1 hidden-sm-and-down"
21+
contain
22+
min-width="100"
23+
src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
24+
width="100"
25+
/>
26+
</div>
27+
28+
<v-spacer></v-spacer>
1029

11-
<style lang="scss">
12-
#app {
13-
font-family: Avenir, Helvetica, Arial, sans-serif;
14-
-webkit-font-smoothing: antialiased;
15-
-moz-osx-font-smoothing: grayscale;
16-
text-align: center;
17-
color: #2c3e50;
18-
}
30+
<v-btn
31+
href="https://github.com/vuetifyjs/vuetify/releases/latest"
32+
target="_blank"
33+
text
34+
>
35+
<span class="mr-2">Latest Release</span>
36+
<v-icon>mdi-open-in-new</v-icon>
37+
</v-btn>
38+
</v-app-bar>
39+
40+
<v-main>
41+
<router-view/>
42+
</v-main>
43+
</v-app>
44+
</template>
1945

20-
#nav {
21-
padding: 30px;
46+
<script lang="ts">
47+
import Vue from 'vue'
2248
23-
a {
24-
font-weight: bold;
25-
color: #2c3e50;
49+
export default Vue.extend({
50+
name: 'App',
2651
27-
&.router-link-exact-active {
28-
color: #42b983;
29-
}
30-
}
31-
}
32-
</style>
52+
data: () => ({
53+
//
54+
})
55+
})
56+
</script>

‎src/assets/logo.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/HelloWorld.vue

Lines changed: 147 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,153 @@
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-pwa" target="_blank" rel="noopener">pwa</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-mocha" target="_blank" rel="noopener">unit-mocha</a></li>
17-
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-e2e-cypress" target="_blank" rel="noopener">e2e-cypress</a></li>
18-
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
19-
</ul>
20-
<h3>Essential Links</h3>
21-
<ul>
22-
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
23-
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
24-
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
25-
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
26-
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
27-
</ul>
28-
<h3>Ecosystem</h3>
29-
<ul>
30-
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
31-
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
32-
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
33-
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
34-
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
35-
</ul>
36-
</div>
2+
<v-container>
3+
<v-row class="text-center">
4+
<v-col cols="12">
5+
<v-img
6+
:src="require('../assets/logo.svg')"
7+
class="my-3"
8+
contain
9+
height="200"
10+
/>
11+
</v-col>
12+
13+
<v-col class="mb-4">
14+
<h1 class="display-2 font-weight-bold mb-3">
15+
Welcome to Vuetify
16+
</h1>
17+
18+
<p class="subheading font-weight-regular">
19+
For help and collaboration with other Vuetify developers,
20+
<br>please join our online
21+
<a
22+
href="https://community.vuetifyjs.com"
23+
target="_blank"
24+
>Discord Community</a>
25+
</p>
26+
</v-col>
27+
28+
<v-col
29+
class="mb-5"
30+
cols="12"
31+
>
32+
<h2 class="headline font-weight-bold mb-3">
33+
What's next?
34+
</h2>
35+
36+
<v-row justify="center">
37+
<a
38+
v-for="(next, i) in whatsNext"
39+
:key="i"
40+
:href="next.href"
41+
class="subheading mx-3"
42+
target="_blank"
43+
>
44+
{{ next.text }}
45+
</a>
46+
</v-row>
47+
</v-col>
48+
49+
<v-col
50+
class="mb-5"
51+
cols="12"
52+
>
53+
<h2 class="headline font-weight-bold mb-3">
54+
Important Links
55+
</h2>
56+
57+
<v-row justify="center">
58+
<a
59+
v-for="(link, i) in importantLinks"
60+
:key="i"
61+
:href="link.href"
62+
class="subheading mx-3"
63+
target="_blank"
64+
>
65+
{{ link.text }}
66+
</a>
67+
</v-row>
68+
</v-col>
69+
70+
<v-col
71+
class="mb-5"
72+
cols="12"
73+
>
74+
<h2 class="headline font-weight-bold mb-3">
75+
Ecosystem
76+
</h2>
77+
78+
<v-row justify="center">
79+
<a
80+
v-for="(eco, i) in ecosystem"
81+
:key="i"
82+
:href="eco.href"
83+
class="subheading mx-3"
84+
target="_blank"
85+
>
86+
{{ eco.text }}
87+
</a>
88+
</v-row>
89+
</v-col>
90+
</v-row>
91+
</v-container>
3792
</template>
3893

3994
<script lang="ts">
40-
import { Component, Prop, Vue } from 'vue-property-decorator'
95+
import Vue from 'vue'
4196
42-
@Component
43-
export default class HelloWorld extends Vue {
44-
@Prop() private msg!: string;
45-
}
46-
</script>
97+
export default Vue.extend({
98+
name: 'HelloWorld',
4799
48-
<!-- Add "scoped" attribute to limit CSS to this component only -->
49-
<style scoped lang="scss">
50-
h3 {
51-
margin: 40px 0 0;
52-
}
53-
ul {
54-
list-style-type: none;
55-
padding: 0;
56-
}
57-
li {
58-
display: inline-block;
59-
margin: 0 10px;
60-
}
61-
a {
62-
color: #42b983;
63-
}
64-
</style>
100+
data: () => ({
101+
ecosystem: [
102+
{
103+
text: 'vuetify-loader',
104+
href: 'https://github.com/vuetifyjs/vuetify-loader'
105+
},
106+
{
107+
text: 'github',
108+
href: 'https://github.com/vuetifyjs/vuetify'
109+
},
110+
{
111+
text: 'awesome-vuetify',
112+
href: 'https://github.com/vuetifyjs/awesome-vuetify'
113+
}
114+
],
115+
importantLinks: [
116+
{
117+
text: 'Documentation',
118+
href: 'https://vuetifyjs.com'
119+
},
120+
{
121+
text: 'Chat',
122+
href: 'https://community.vuetifyjs.com'
123+
},
124+
{
125+
text: 'Made with Vuetify',
126+
href: 'https://madewithvuejs.com/vuetify'
127+
},
128+
{
129+
text: 'Twitter',
130+
href: 'https://twitter.com/vuetifyjs'
131+
},
132+
{
133+
text: 'Articles',
134+
href: 'https://medium.com/vuetify'
135+
}
136+
],
137+
whatsNext: [
138+
{
139+
text: 'Explore components',
140+
href: 'https://vuetifyjs.com/components/api-explorer'
141+
},
142+
{
143+
text: 'Select a layout',
144+
href: 'https://vuetifyjs.com/getting-started/pre-made-layouts'
145+
},
146+
{
147+
text: 'Frequently Asked Questions',
148+
href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions'
149+
}
150+
]
151+
})
152+
})
153+
</script>

‎src/main.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@ import App from './App.vue'
33
import './registerServiceWorker'
44
import router from './router'
55
import store from './store'
6+
import vuetify from './plugins/vuetify'
67

78
Vue.config.productionTip = false
89

910
new Vue({
1011
router,
1112
store,
13+
vuetify,
1214
render: h => h(App)
1315
}).$mount('#app')

‎src/plugins/vuetify.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import Vue from 'vue'
2+
import Vuetify from 'vuetify/lib/framework'
3+
4+
Vue.use(Vuetify)
5+
6+
export default new Vuetify({
7+
})

‎src/shims-vuetify.d.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
declare module 'vuetify/lib/framework' {
2+
import Vuetify from 'vuetify'
3+
export default Vuetify
4+
}

‎src/views/Home.vue

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
<template>
2-
<div class="home">
3-
<img alt="Vue logo" src="../assets/logo.png">
4-
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
5-
</div>
2+
<hello-world />
63
</template>
74

85
<script lang="ts">
9-
import { Component, Vue } from 'vue-property-decorator'
10-
import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src
6+
import Vue from 'vue'
7+
import HelloWorld from '../components/HelloWorld.vue'
8+
9+
export default Vue.extend({
10+
name: 'Home',
1111
12-
@Component({
1312
components: {
1413
HelloWorld
1514
}
1615
})
17-
export default class Home extends Vue {}
1816
</script>

‎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)