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

Commit 5706657

Browse files
ElijahKotylukKaelWD
ElijahKotyluk
and
KaelWD
authored
feat(v3-preset): add v3 preset (#237)
Co-authored-by: Kael <kaelwd@gmail.com>
1 parent 2191589 commit 5706657

File tree

13 files changed

+320
-21
lines changed

13 files changed

+320
-21
lines changed

‎packages/vue-cli-plugin-vuetify/generator/index.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,16 @@ module.exports = (api, opts) => {
1010

1111
// Add imports
1212
// Must be before dependencies because of weird bug
13-
vuetify.addImports(api)
13+
if (!opts.useV3) vuetify.addImports(api)
1414
if (!opts.useAlaCarte && opts.usePolyfill) polyfill.addImports(api)
15-
if (opts.installFonts) fonts.addImports(api, opts.iconFont)
15+
if (opts.installFonts && !opts.useV3) fonts.addImports(api, opts.iconFont)
1616

1717
// Add dependencies
18-
vuetify.addDependencies(api)
18+
vuetify.addDependencies(api, opts.useV3)
1919
if (opts.useAlaCarte) alaCarte.addDependencies(api)
2020
else if (opts.usePolyfill) polyfill.addDependencies(api)
2121

22-
if (opts.installFonts) fonts.addDependencies(api, opts.iconFont)
22+
if (opts.installFonts) fonts.addDependencies(api, opts.iconFont, opts.useV3)
2323

2424
// Update vue.config.js for transpileDependency if AlaCarte
2525
if (opts.useAlaCarte) alaCarte.addVueConfigTranspileDependency(api)

‎packages/vue-cli-plugin-vuetify/generator/templates/v3/src/App.js.vue

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<v-app>
3+
<%_ if (router) { _%>
4+
<router-view/>
5+
<%_ } else { _%>
6+
<HelloWorld/>
7+
<%_ } _%>
8+
<v-app/>
9+
</template>
10+
11+
<script>
12+
<%_ if (!router) { _%>
13+
import HelloWorld from './components/HelloWorld';
14+
<%_ } _%>
15+
16+
export default {
17+
name: 'App',
18+
19+
<%_ if (!router) { _%>
20+
components: {
21+
HelloWorld,
22+
},
23+
24+
<%_ } _%>
25+
data: () => ({
26+
//
27+
}),
28+
};
29+
</script>

‎packages/vue-cli-plugin-vuetify/generator/templates/v3/src/App.ts.vue

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
</template>
3+
4+
<script lang="ts">
5+
import { defineComponent } from 'vue';
6+
7+
export default defineComponent({
8+
name: 'App',
9+
components: {}
10+
});
11+
</script>

‎packages/vue-cli-plugin-vuetify/generator/templates/v3/src/assets/logo.svg

Lines changed: 1 addition & 0 deletions
Loading

‎packages/vue-cli-plugin-vuetify/generator/templates/v3/src/components/HelloWorld.js.vue

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
<template>
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 V3 Alpha
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-5">
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-5">
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-5">
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>
92+
</template>
93+
94+
<script>
95+
96+
export default {
97+
name: 'Playground',
98+
99+
data: () => ({
100+
ecosystem: [
101+
{
102+
text: 'vuetify-loader',
103+
href: 'https://github.com/vuetifyjs/vuetify-loader',
104+
},
105+
{
106+
text: 'github',
107+
href: 'https://github.com/vuetifyjs/vuetify',
108+
},
109+
{
110+
text: 'awesome-vuetify',
111+
href: 'https://github.com/vuetifyjs/awesome-vuetify',
112+
},
113+
],
114+
importantLinks: [
115+
{
116+
text: 'Chat',
117+
href: 'https://community.vuetifyjs.com',
118+
},
119+
{
120+
text: 'Made with Vuetify',
121+
href: 'https://madewithvuejs.com/vuetify',
122+
},
123+
{
124+
text: 'Twitter',
125+
href: 'https://twitter.com/vuetifyjs',
126+
},
127+
{
128+
text: 'Articles',
129+
href: 'https://medium.com/vuetify',
130+
},
131+
],
132+
whatsNext: [
133+
{
134+
text: 'Explore components',
135+
href: 'https://vuetifyjs.com',
136+
},
137+
{
138+
text: 'Roadmap',
139+
href: 'https://vuetifyjs.com/en/introduction/roadmap/',
140+
},
141+
{
142+
text: 'Frequently Asked Questions',
143+
href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
144+
},
145+
],
146+
}),
147+
}
148+
</script>

‎packages/vue-cli-plugin-vuetify/generator/templates/v3/src/main.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { createApp } from "vue";
2+
import vuetify from "./vuetify";
3+
import App from "./App";
4+
5+
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
6+
import { library } from "@fortawesome/fontawesome-svg-core";
7+
import { fas } from "@fortawesome/free-solid-svg-icons";
8+
9+
library.add(fas);
10+
11+
const app = createApp(App);
12+
13+
app.use(vuetify);
14+
app.component("FontAwesomeIcon", FontAwesomeIcon);
15+
16+
app.mount("#app");

‎packages/vue-cli-plugin-vuetify/generator/templates/v3/src/plugins/vuetify.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import "@mdi/font/css/materialdesignicons.css";
2+
import { createVuetify } from "vuetify";
3+
import { aliases, mdi } from "vuetify/src/iconsets/mdi";
4+
import { fa } from "vuetify/src/iconsets/fa-svg";
5+
6+
export default createVuetify({
7+
// lang: {
8+
// locales,
9+
// },
10+
icons: {
11+
defaultSet: "mdi",
12+
aliases,
13+
sets: {
14+
mdi,
15+
fa,
16+
},
17+
},
18+
});

‎packages/vue-cli-plugin-vuetify/generator/templates/v3/src/router/router.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { createRouter } from 'vue-router'
2+
import Home from '../views/Home.vue'
3+
4+
const routes = [
5+
{
6+
path: '/',
7+
name: 'Home',
8+
component: Home,
9+
},
10+
]
11+
12+
const router = createRouter({
13+
routes,
14+
})
15+
16+
export default router

‎packages/vue-cli-plugin-vuetify/generator/templates/v3/src/views/Home.js.vue

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<div>
3+
<HelloWorld/>
4+
</div>
5+
</template>
6+
7+
<script>
8+
import HelloWorld from '../components/HelloWorld.vue'
9+
10+
export default {
11+
name: 'Home',
12+
13+
components: {
14+
HelloWorld,
15+
},
16+
}
17+
</script>

‎packages/vue-cli-plugin-vuetify/generator/tools/fonts.js

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,23 @@ const fonts = {
3737
},
3838
}
3939

40-
function addDependencies (api, iconFont) {
41-
api.extendPackage({
40+
function addDependencies (api, iconFont, useV3) {
41+
let pkgOpts = {
4242
dependencies: {
4343
...fonts.roboto.package,
4444
...fonts[iconFont].package,
45-
},
46-
})
45+
}
46+
}
47+
48+
if (useV3) pkgOpts = {
49+
...pkgOpts,
50+
// Use specified version or latest?
51+
"@fortawesome/fontawesome-svg-core": "latest",
52+
"@fortawesome/free-solid-svg-icons": "latest",
53+
"@fortawesome/vue-fontawesome": "latest",
54+
}
55+
56+
api.extendPackage(pkgOpts)
4757
}
4858

4959
function addImports (api, iconFont) {

0 commit comments

Comments
 (0)