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

Commit 5994ccd

Browse files
MajesticPotatoeMajesticPotatoe
authored
feat(preview): Vuetify 3 + Vite preset
feat(preview): Vuetify 3 + Vite preset
2 parents f5a4f51 + 5298d90 commit 5994ccd

File tree

12 files changed

+180
-77
lines changed

12 files changed

+180
-77
lines changed

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ module.exports = (api, opts) => {
44
const polyfill = require('./tools/polyfill')
55
const vuetify = require('./tools/vuetify')
66

7+
const fs = require("fs")
8+
79
if (opts.preset !== 'configure') {
810
opts = require(`../presets/${opts.preset}`).plugins['vue-cli-plugin-vuetify']
911
}
@@ -19,6 +21,28 @@ module.exports = (api, opts) => {
1921
if (opts.useAlaCarte) alaCarte.addDependencies(api, opts.useV3)
2022
else if (opts.usePolyfill) polyfill.addDependencies(api)
2123

24+
// Vite
25+
if (opts.useVite) {
26+
api.extendPackage({
27+
devDependencies: {
28+
'@vitejs/plugin-vue': '^1.1.5',
29+
'vite': '^2.0.5',
30+
},
31+
scripts: {
32+
'serve': 'vite preview',
33+
'build': 'vite build',
34+
'dev': 'vite',
35+
}
36+
})
37+
38+
const viteFiles = {
39+
'./vite.config.js': './templates/v3/src/vite.config.js',
40+
'./index.html': './templates/v3/src/index.vite.html',
41+
}
42+
43+
api.render(viteFiles, opts)
44+
}
45+
2246
if (opts.installFonts) fonts.addDependencies(api, opts.iconFont)
2347

2448
// Update vue.config.js for transpileDependency if AlaCarte
@@ -36,6 +60,10 @@ module.exports = (api, opts) => {
3660
if (!opts.installFonts) fonts.addLinks(api, opts.iconFont)
3761
vuetify.setHtmlLang(api, opts.locale)
3862

63+
if (fs.existsSync('src/public/index.html')) {
64+
fs.unlinkSync(api.resolve('src/public/index.html'));
65+
}
66+
3967
api.exitLog('Discord community: https://community.vuetifyjs.com')
4068
api.exitLog('Github: https://github.com/vuetifyjs/vuetify')
4169
api.exitLog('Support Vuetify: https://github.com/sponsors/johnleider')

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
<script>
1414
<%_ if (!router) { _%>
15-
import HelloWorld from './components/HelloWorld';
15+
import HelloWorld from './components/HelloWorld.vue';
1616
<%_ } _%>
1717
1818
export default {

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

Lines changed: 59 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<v-row class="text-center">
44
<v-col cols="12">
55
<v-img
6-
:src="require('../assets/logo.svg')"
6+
:src="logo"
77
class="my-3"
88
contain
99
height="200"
@@ -12,9 +12,13 @@
1212

1313
<v-col class="mb-4">
1414
<h1 class="display-2 font-weight-bold mb-3">
15-
Welcome to Vuetify V3 Alpha
15+
<div>Welcome to the Vuetify 3 Alpha</div>
1616
</h1>
1717

18+
<%_ if (useVite) { _%>
19+
<small>Vite Preview</small>
20+
<%_ } _%>
21+
1822
<p class="subheading font-weight-regular">
1923
For help and collaboration with other Vuetify developers,
2024
<br>please join our online
@@ -92,57 +96,59 @@
9296
</template>
9397

9498
<script>
99+
import logo from '../assets/logo.svg';
95100
96-
export default {
97-
name: 'Playground',
101+
export default {
102+
name: 'HelloWorld',
98103
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-
}
104+
data: () => ({
105+
ecosystem: [
106+
{
107+
text: 'vuetify-loader',
108+
href: 'https://github.com/vuetifyjs/vuetify-loader',
109+
},
110+
{
111+
text: 'github',
112+
href: 'https://github.com/vuetifyjs/vuetify',
113+
},
114+
{
115+
text: 'awesome-vuetify',
116+
href: 'https://github.com/vuetifyjs/awesome-vuetify',
117+
},
118+
],
119+
importantLinks: [
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+
logo,
138+
whatsNext: [
139+
{
140+
text: 'Explore components',
141+
href: 'https://vuetifyjs.com',
142+
},
143+
{
144+
text: 'Roadmap',
145+
href: 'https://vuetifyjs.com/introduction/roadmap/',
146+
},
147+
{
148+
text: 'Frequently Asked Questions',
149+
href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
150+
},
151+
],
152+
}),
153+
}
148154
</script>

‎packages/vue-cli-plugin-vuetify/generator/templates/v3/src/index.vite.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<link rel="icon" href="/favicon.ico" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Vuetify 3 Vite Preview</title>
9+
</head>
10+
11+
<body>
12+
<div id="app"></div>
13+
<script type="module" src="/src/main.js"></script>
14+
</body>
15+
16+
</html>

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

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,20 @@
1-
import { createApp } from "vue";
2-
import vuetify from "./plugins/vuetify";
3-
import App from "./App";
1+
import { createApp } from 'vue'
2+
import vuetify from './plugins/vuetify'
3+
import App from './App.vue'
4+
<%_ if (router) { _%>
5+
import router from './router'
6+
<%_ } _%>
7+
<%_ if (store) { _%>
8+
import store from './store'
9+
<%_ } _%>
410

5-
const app = createApp(App);
11+
const app = createApp(App)
12+
<%_ if (router) { _%>
13+
app.use(router)
14+
<%_ } _%>
15+
<%_ if (store) { _%>
16+
app.use(store)
17+
<%_ } _%>
18+
app.use(vuetify)
619

7-
app.use(vuetify);
8-
9-
app.mount("#app");
20+
app.mount('#app')

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import "@mdi/font/css/materialdesignicons.css";
2-
import "vuetify/lib/styles/main.sass";
3-
import { createVuetify } from "vuetify";
4-
import * as components from "vuetify/lib/components";
5-
import * as directives from "vuetify/lib/directives";
1+
import '@mdi/font/css/materialdesignicons.css'
2+
import 'vuetify/lib/styles/main.sass'
3+
import { createVuetify } from 'vuetify'
4+
import * as components from 'vuetify/lib/components'
5+
import * as directives from 'vuetify/lib/directives'
66

77
export default createVuetify({
88
components,
99
directives,
10-
});
10+
})

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

File renamed without changes.

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55
</template>
66

77
<script>
8-
import HelloWorld from '../components/HelloWorld.vue'
8+
import HelloWorld from '../components/HelloWorld.vue';
99
10-
export default {
11-
name: 'Home',
12-
13-
components: {
14-
HelloWorld,
15-
},
16-
}
10+
export default {
11+
name: 'Home',
12+
13+
components: {
14+
HelloWorld,
15+
},
16+
};
1717
</script>

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { defineConfig } from 'vite'
2+
import vue from '@vitejs/plugin-vue'
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [vue()],
7+
define: { 'process.env': {} },
8+
/* remove the need to specify .vue files https://vitejs.dev/config/#resolve-extensions
9+
resolve: {
10+
extensions: [
11+
'.js',
12+
'.json',
13+
'.jsx',
14+
'.mjs',
15+
'.ts',
16+
'.tsx',
17+
'.vue',
18+
]
19+
},
20+
*/
21+
})

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ const helpers = require('./helpers')
44
function addDependencies (api, v3) {
55
api.extendPackage({
66
dependencies: {
7-
// Will currently prompt to select version for v3 preset, until v3 is released.
87
vuetify: v3 ? '^3.0.0-alpha.0' : '^2.4.0',
98
},
109
})
@@ -31,7 +30,9 @@ function renderFiles (api, { opts }) {
3130
// Render files if we're replacing
3231
const fs = require('fs')
3332
const routerPath = api.resolve(`./src/router.${ext}`)
33+
const storePath = api.resolve(`./src/store.${ext}`)
3434
opts.router = fs.existsSync(routerPath)
35+
opts.store = fs.existsSync(storePath)
3536

3637
let files = {
3738
"./src/App.vue": `../templates/default/src/App.${ext}.vue`,

‎packages/vue-cli-plugin-vuetify/presets/preview.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"useConfigFiles": true,
3+
"cssPreprocessor": "scss",
4+
"plugins": {
5+
"vue-cli-plugin-vuetify": {
6+
"preset": "configure",
7+
"replaceComponents": true,
8+
"iconFont": "mdi",
9+
"installFonts": true,
10+
"locale": "en",
11+
"useAlaCarte": true,
12+
"useCustomProperties": false,
13+
"usePolyfill": false,
14+
"useTheme": false,
15+
"useV3": true,
16+
"useVite": true
17+
}
18+
}
19+
}

‎packages/vue-cli-plugin-vuetify/util/presets.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ const resolve = file => path.resolve(__dirname, file)
44

55
const PRESET_MAP = {
66
default: 'Default (recommended)',
7+
preview: 'Preview (Vuetify 3 + Vite)',
78
prototype: 'Prototype (rapid development)',
8-
v3: 'V3 (alpha)'
9+
v3: 'V3 (alpha)',
910
}
1011

1112
module.exports = fs.readdirSync(resolve('../presets')).map(preset => {

0 commit comments

Comments
 (0)