Skip to content
This repository was archived by the owner on May 8, 2025. It is now read-only.

Commit 0c10463

Browse files
johnleiderjohnleider
committed
feat(plugin): upgrade to [email protected]
also improved the terrible UI the plugin gave
1 parent f7fd92a commit 0c10463

File tree

11 files changed

+193
-277
lines changed

11 files changed

+193
-277
lines changed

‎generator/index.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ module.exports = (api, opts, rootOpts) => {
1717
opts.usePolyfill && polyfill.updateBabelConfig(api)
1818
opts.usePolyfill && polyfill.updateBrowsersList(api)
1919
opts.usePolyfill && polyfill.addImports(api)
20-
opts.useAlaCarte && alaCarte.updateBabelConfig(api)
2120
!opts.installFonts && fonts.addLinks(api, opts.iconFont)
2221
vuetify.setHtmlLang(api, opts.locale)
2322
})

‎generator/templates/default/src/App.vue

Lines changed: 14 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,28 @@
11
<template>
22
<v-app>
3-
<v-navigation-drawer
4-
persistent
5-
:mini-variant="miniVariant"
6-
:clipped="clipped"
7-
v-model="drawer"
8-
enable-resize-watcher
9-
fixed
10-
app
11-
>
12-
<v-list>
13-
<v-list-tile
14-
value="true"
15-
v-for="(item, i) in items"
16-
:key="i"
17-
>
18-
<v-list-tile-action>
19-
<v-icon v-html="item.icon"></v-icon>
20-
</v-list-tile-action>
21-
<v-list-tile-content>
22-
<v-list-tile-title v-text="item.title"></v-list-tile-title>
23-
</v-list-tile-content>
24-
</v-list-tile>
25-
</v-list>
26-
</v-navigation-drawer>
27-
<v-toolbar
28-
app
29-
:clipped-left="clipped"
30-
>
31-
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
32-
<v-btn icon @click.stop="miniVariant = !miniVariant">
33-
<%_ if (options.iconFont === 'md') { _%>
34-
<v-icon v-html="miniVariant ? 'chevron_right' : 'chevron_left'"></v-icon>
35-
<%_ } else if (options.iconFont === 'mdi') { _%>
36-
<v-icon v-html="miniVariant ? 'mdi-chevron-right' : 'mdi-chevron-left'"></v-icon>
37-
<%_ } else if (options.iconFont === 'fa') { _%>
38-
<v-icon v-html="miniVariant ? 'fas fa-chevron-right' : 'fas fa-chevron-left'"></v-icon>
39-
<%_ } else if (options.iconFont === 'fa4') { _%>
40-
<v-icon v-html="miniVariant ? 'fa-chevron-right' : 'fa-chevron-left'"></v-icon>
41-
<%_ } _%>
42-
</v-btn>
43-
<v-btn icon @click.stop="clipped = !clipped">
44-
<%_ if (options.iconFont === 'md') { _%>
45-
<v-icon>web</v-icon>
46-
<%_ } else if (options.iconFont === 'mdi') { _%>
47-
<v-icon>mdi-web</v-icon>
48-
<%_ } else if (options.iconFont === 'fa') { _%>
49-
<v-icon>fas fa-globe</v-icon>
50-
<%_ } else if (options.iconFont === 'fa4') { _%>
51-
<v-icon>fa-globe</v-icon>
52-
<%_ } _%>
53-
</v-btn>
54-
<v-btn icon @click.stop="fixed = !fixed">
55-
<%_ if (options.iconFont === 'md') { _%>
56-
<v-icon>web</v-icon>
57-
<%_ } else if (options.iconFont === 'mdi') { _%>
58-
<v-icon>mdi-minus</v-icon>
59-
<%_ } else if (options.iconFont === 'fa') { _%>
60-
<v-icon>fas fa-minus</v-icon>
61-
<%_ } else if (options.iconFont === 'fa4') { _%>
62-
<v-icon>fa-minus</v-icon>
63-
<%_ } _%>
64-
</v-btn>
65-
<v-toolbar-title v-text="title"></v-toolbar-title>
3+
<v-toolbar app>
4+
<v-toolbar-title class="headline text-uppercase">
5+
<span>Vuetify</span>
6+
<span class="font-weight-light">MATERIAL DESIGN</span>
7+
</v-toolbar-title>
668
<v-spacer></v-spacer>
67-
<v-btn icon @click.stop="rightDrawer = !rightDrawer">
68-
<%_ if (options.iconFont === 'md') { _%>
69-
<v-icon>menu</v-icon>
70-
<%_ } else if (options.iconFont === 'mdi') { _%>
71-
<v-icon>mdi-menu</v-icon>
72-
<%_ } else if (options.iconFont === 'fa') { _%>
73-
<v-icon>fas fa-bars</v-icon>
74-
<%_ } else if (options.iconFont === 'fa4') { _%>
75-
<v-icon>fa-bars</v-icon>
76-
<%_ } _%>
9+
<v-btn
10+
flat
11+
href="https://github.com/vuetifyjs/vuetify/releases/latest"
12+
target="_blank"
13+
>
14+
<span class="mr-2">Latest Release</span>
15+
<v-icon>open_in_new</v-icon>
7716
</v-btn>
7817
</v-toolbar>
18+
7919
<v-content>
8020
<%_ if (options.router) { _%>
8121
<router-view/>
8222
<%_ } else { _%>
8323
<HelloWorld/>
8424
<%_ } _%>
8525
</v-content>
86-
<v-navigation-drawer
87-
temporary
88-
:right="right"
89-
v-model="rightDrawer"
90-
fixed
91-
app
92-
>
93-
<v-list>
94-
<v-list-tile @click="right = !right">
95-
<v-list-tile-action>
96-
<%_ if (options.iconFont === 'md') { _%>
97-
<v-icon>compare_arrows</v-icon>
98-
<%_ } else if (options.iconFont === 'mdi') { _%>
99-
<v-icon>mdi-arrows-left-right-bold-outline</v-icon>
100-
<%_ } else if (options.iconFont === 'fa') { _%>
101-
<v-icon>fas fa-exchange-alt</v-icon>
102-
<%_ } else if (options.iconFont === 'fa4') { _%>
103-
<v-icon>fa-exchange</v-icon>
104-
<%_ } _%>
105-
</v-list-tile-action>
106-
<v-list-tile-title>Switch drawer (click me)</v-list-tile-title>
107-
</v-list-tile>
108-
</v-list>
109-
</v-navigation-drawer>
110-
<v-footer :fixed="fixed" app>
111-
<span>&copy; 2017</span>
112-
</v-footer>
11326
</v-app>
11427
</template>
11528

@@ -127,25 +40,7 @@ export default {
12740
<%_ } _%>
12841
data () {
12942
return {
130-
clipped: false,
131-
drawer: true,
132-
fixed: false,
133-
items: [{
134-
<%_ if (options.iconFont === 'md') { _%>
135-
icon: 'bubble_chart',
136-
<%_ } else if (options.iconFont === 'mdi') { _%>
137-
icon: 'mdi-chart-bubble',
138-
<%_ } else if (options.iconFont === 'fa') { _%>
139-
icon: 'fas fa-shapes',
140-
<%_ } else if (options.iconFont === 'fa4') { _%>
141-
icon: 'fa-bullseye',
142-
<%_ } _%>
143-
title: 'Inspire'
144-
}],
145-
miniVariant: false,
146-
right: true,
147-
rightDrawer: false,
148-
title: 'Vuetify.js'
43+
//
14944
}
15045
}
15146
}

‎generator/templates/default/src/assets/logo.png

-5.54 KB
Binary file not shown.

‎generator/templates/default/src/assets/logo.svg

Lines changed: 1 addition & 0 deletions
Loading

‎generator/templates/default/src/components/HelloWorld.vue

Lines changed: 140 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,145 @@
11
<template>
2-
<v-container fluid>
3-
<v-slide-y-transition mode="out-in">
4-
<v-layout column align-center>
5-
<img src="@/assets/logo.png" alt="Vuetify.js" class="mb-5">
6-
<blockquote>
7-
&#8220;First, solve the problem. Then, write the code.&#8221;
8-
<footer>
9-
<small>
10-
<em>&mdash;John Johnson</em>
11-
</small>
12-
</footer>
13-
</blockquote>
14-
</v-layout>
15-
</v-slide-y-transition>
2+
<v-container>
3+
<v-layout
4+
text-xs-center
5+
wrap
6+
>
7+
<v-flex xs12>
8+
<v-img
9+
class="my-3"
10+
contain
11+
height="200"
12+
></v-img>
13+
</v-flex>
14+
15+
<v-flex mb-4>
16+
<h1 class="display-2 font-weight-bold mb-3">
17+
Welcome to Vuetify
18+
</h1>
19+
<p class="subheading font-weight-regular">
20+
For help and collaboration with other Vuetify developers,
21+
<br>please join our online
22+
<a href="https://community.vuetifyjs.com" target="_blank">Discord Community</a>
23+
</p>
24+
</v-flex>
25+
26+
<v-flex
27+
mb-5
28+
xs12
29+
>
30+
<h2 class="headline font-weight-bold mb-3">What's next?</h2>
31+
32+
<v-layout justify-center>
33+
<a
34+
v-for="(next, i) in whatsNext"
35+
:key="i"
36+
:href="next.href"
37+
class="subheading mx-3"
38+
target="_blank"
39+
>
40+
{{ next.text }}
41+
</a>
42+
</v-layout>
43+
</v-flex>
44+
45+
<v-flex
46+
xs12
47+
mb-5
48+
>
49+
<h2 class="headline font-weight-bold mb-3">Important Links</h2>
50+
51+
<v-layout justify-center>
52+
<a
53+
v-for="(link, i) in importantLinks"
54+
:key="i"
55+
:href="link.href"
56+
class="subheading mx-3"
57+
target="_blank"
58+
>
59+
{{ link.text }}
60+
</a>
61+
</v-layout>
62+
</v-flex>
63+
64+
<v-flex
65+
xs12
66+
mb-5
67+
>
68+
<h2 class="headline font-weight-bold mb-3">Ecosystem</h2>
69+
70+
<v-layout justify-center>
71+
<a
72+
v-for="(eco, i) in ecosystem"
73+
:key="i"
74+
:href="eco.href"
75+
class="subheading mx-3"
76+
target="_blank"
77+
>
78+
{{ eco.text }}
79+
</a>
80+
</v-layout>
81+
</v-flex>
82+
</v-layout>
1683
</v-container>
1784
</template>
1885

19-
<!-- Add "scoped" attribute to limit CSS to this component only -->
20-
<style scoped>
21-
h1, h2 {
22-
font-weight: normal;
23-
}
24-
ul {
25-
list-style-type: none;
26-
padding: 0;
27-
}
28-
li {
29-
display: inline-block;
30-
margin: 0 10px;
31-
}
32-
a {
33-
color: #42b983;
34-
}
86+
<script>
87+
export default {
88+
data: () => ({
89+
ecosystem: [
90+
{
91+
text: 'vuetify-loader',
92+
href: 'https://github.com/vuetifyjs/vuetify-loader'
93+
},
94+
{
95+
text: 'github',
96+
href: 'https://github.com/vuetifyjs/vuetify'
97+
},
98+
{
99+
text: 'awesome-vuetify',
100+
href: 'https://github.com/vuetifyjs/awesome-vuetify'
101+
}
102+
],
103+
importantLinks: [
104+
{
105+
text: 'Documentation',
106+
href: 'https://vuetifyjs.com'
107+
},
108+
{
109+
text: 'Chat',
110+
href: 'https://community.vuetifyjs.com'
111+
},
112+
{
113+
text: 'Made with Vuetify',
114+
href: 'https://madewithvuetifyjs.com'
115+
},
116+
{
117+
text: 'Twitter',
118+
href: 'https://twitter.com/vuetifyjs'
119+
},
120+
{
121+
text: 'Articles',
122+
href: 'https://medium.com/vuetify'
123+
}
124+
],
125+
whatsNext: [
126+
{
127+
text: 'Select a layout',
128+
href: 'https://vuetifyjs.com/layout/pre-defined'
129+
},
130+
{
131+
text: 'Frequently Asked Questions',
132+
href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions'
133+
},
134+
{
135+
text: 'Explore components',
136+
href: 'https://vuetifyjs.com/components/api-explorer'
137+
}
138+
]
139+
})
140+
}
141+
</script>
142+
143+
<style>
144+
35145
</style>

0 commit comments

Comments
 (0)