Skip to content

Commit

Permalink
feat(preview): Vuetify 3 + Vite preset
Browse files Browse the repository at this point in the history
feat(preview): Vuetify 3 + Vite preset
  • Loading branch information
MajesticPotatoe authored Mar 17, 2021
2 parents f5a4f51 + 5298d90 commit 5994ccd
Show file tree
Hide file tree
Showing 12 changed files with 180 additions and 77 deletions.
28 changes: 28 additions & 0 deletions packages/vue-cli-plugin-vuetify/generator/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ module.exports = (api, opts) => {
const polyfill = require('./tools/polyfill')
const vuetify = require('./tools/vuetify')

const fs = require("fs")

if (opts.preset !== 'configure') {
opts = require(`../presets/${opts.preset}`).plugins['vue-cli-plugin-vuetify']
}
Expand All @@ -19,6 +21,28 @@ module.exports = (api, opts) => {
if (opts.useAlaCarte) alaCarte.addDependencies(api, opts.useV3)
else if (opts.usePolyfill) polyfill.addDependencies(api)

// Vite
if (opts.useVite) {
api.extendPackage({
devDependencies: {
'@vitejs/plugin-vue': '^1.1.5',
'vite': '^2.0.5',
},
scripts: {
'serve': 'vite preview',
'build': 'vite build',
'dev': 'vite',
}
})

const viteFiles = {
'./vite.config.js': './templates/v3/src/vite.config.js',
'./index.html': './templates/v3/src/index.vite.html',
}

api.render(viteFiles, opts)
}

if (opts.installFonts) fonts.addDependencies(api, opts.iconFont)

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

if (fs.existsSync('src/public/index.html')) {
fs.unlinkSync(api.resolve('src/public/index.html'));
}

api.exitLog('Discord community: https://community.vuetifyjs.com')
api.exitLog('Github: https://github.com/vuetifyjs/vuetify')
api.exitLog('Support Vuetify: https://github.com/sponsors/johnleider')
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

<script>
<%_ if (!router) { _%>
import HelloWorld from './components/HelloWorld';
import HelloWorld from './components/HelloWorld.vue';
<%_ } _%>
export default {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<v-row class="text-center">
<v-col cols="12">
<v-img
:src="require('../assets/logo.svg')"
:src="logo"
class="my-3"
contain
height="200"
Expand All @@ -12,9 +12,13 @@

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

<%_ if (useVite) { _%>
<small>Vite Preview</small>
<%_ } _%>

<p class="subheading font-weight-regular">
For help and collaboration with other Vuetify developers,
<br>please join our online
Expand Down Expand Up @@ -92,57 +96,59 @@
</template>

<script>
import logo from '../assets/logo.svg';
export default {
name: 'Playground',
export default {
name: 'HelloWorld',
data: () => ({
ecosystem: [
{
text: 'vuetify-loader',
href: 'https://github.com/vuetifyjs/vuetify-loader',
},
{
text: 'github',
href: 'https://github.com/vuetifyjs/vuetify',
},
{
text: 'awesome-vuetify',
href: 'https://github.com/vuetifyjs/awesome-vuetify',
},
],
importantLinks: [
{
text: 'Chat',
href: 'https://community.vuetifyjs.com',
},
{
text: 'Made with Vuetify',
href: 'https://madewithvuejs.com/vuetify',
},
{
text: 'Twitter',
href: 'https://twitter.com/vuetifyjs',
},
{
text: 'Articles',
href: 'https://medium.com/vuetify',
},
],
whatsNext: [
{
text: 'Explore components',
href: 'https://vuetifyjs.com',
},
{
text: 'Roadmap',
href: 'https://vuetifyjs.com/en/introduction/roadmap/',
},
{
text: 'Frequently Asked Questions',
href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
},
],
}),
}
data: () => ({
ecosystem: [
{
text: 'vuetify-loader',
href: 'https://github.com/vuetifyjs/vuetify-loader',
},
{
text: 'github',
href: 'https://github.com/vuetifyjs/vuetify',
},
{
text: 'awesome-vuetify',
href: 'https://github.com/vuetifyjs/awesome-vuetify',
},
],
importantLinks: [
{
text: 'Chat',
href: 'https://community.vuetifyjs.com',
},
{
text: 'Made with Vuetify',
href: 'https://madewithvuejs.com/vuetify',
},
{
text: 'Twitter',
href: 'https://twitter.com/vuetifyjs',
},
{
text: 'Articles',
href: 'https://medium.com/vuetify',
},
],
logo,
whatsNext: [
{
text: 'Explore components',
href: 'https://vuetifyjs.com',
},
{
text: 'Roadmap',
href: 'https://vuetifyjs.com/introduction/roadmap/',
},
{
text: 'Frequently Asked Questions',
href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
},
],
}),
}
</script>
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vuetify 3 Vite Preview</title>
</head>

<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>

</html>
25 changes: 18 additions & 7 deletions packages/vue-cli-plugin-vuetify/generator/templates/v3/src/main.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,20 @@
import { createApp } from "vue";
import vuetify from "./plugins/vuetify";
import App from "./App";
import { createApp } from 'vue'
import vuetify from './plugins/vuetify'
import App from './App.vue'
<%_ if (router) { _%>
import router from './router'
<%_ } _%>
<%_ if (store) { _%>
import store from './store'
<%_ } _%>

const app = createApp(App);
const app = createApp(App)
<%_ if (router) { _%>
app.use(router)
<%_ } _%>
<%_ if (store) { _%>
app.use(store)
<%_ } _%>
app.use(vuetify)

app.use(vuetify);

app.mount("#app");
app.mount('#app')
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import "@mdi/font/css/materialdesignicons.css";
import "vuetify/lib/styles/main.sass";
import { createVuetify } from "vuetify";
import * as components from "vuetify/lib/components";
import * as directives from "vuetify/lib/directives";
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/lib/styles/main.sass'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/lib/components'
import * as directives from 'vuetify/lib/directives'

export default createVuetify({
components,
directives,
});
})
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@
</template>

<script>
import HelloWorld from '../components/HelloWorld.vue'
import HelloWorld from '../components/HelloWorld.vue';
export default {
name: 'Home',
components: {
HelloWorld,
},
}
export default {
name: 'Home',
components: {
HelloWorld,
},
};
</script>
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
define: { 'process.env': {} },
/* remove the need to specify .vue files https://vitejs.dev/config/#resolve-extensions
resolve: {
extensions: [
'.js',
'.json',
'.jsx',
'.mjs',
'.ts',
'.tsx',
'.vue',
]
},
*/
})
3 changes: 2 additions & 1 deletion packages/vue-cli-plugin-vuetify/generator/tools/vuetify.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ const helpers = require('./helpers')
function addDependencies (api, v3) {
api.extendPackage({
dependencies: {
// Will currently prompt to select version for v3 preset, until v3 is released.
vuetify: v3 ? '^3.0.0-alpha.0' : '^2.4.0',
},
})
Expand All @@ -31,7 +30,9 @@ function renderFiles (api, { opts }) {
// Render files if we're replacing
const fs = require('fs')
const routerPath = api.resolve(`./src/router.${ext}`)
const storePath = api.resolve(`./src/store.${ext}`)
opts.router = fs.existsSync(routerPath)
opts.store = fs.existsSync(storePath)

let files = {
"./src/App.vue": `../templates/default/src/App.${ext}.vue`,
Expand Down
19 changes: 19 additions & 0 deletions packages/vue-cli-plugin-vuetify/presets/preview.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"useConfigFiles": true,
"cssPreprocessor": "scss",
"plugins": {
"vue-cli-plugin-vuetify": {
"preset": "configure",
"replaceComponents": true,
"iconFont": "mdi",
"installFonts": true,
"locale": "en",
"useAlaCarte": true,
"useCustomProperties": false,
"usePolyfill": false,
"useTheme": false,
"useV3": true,
"useVite": true
}
}
}
3 changes: 2 additions & 1 deletion packages/vue-cli-plugin-vuetify/util/presets.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@ const resolve = file => path.resolve(__dirname, file)

const PRESET_MAP = {
default: 'Default (recommended)',
preview: 'Preview (Vuetify 3 + Vite)',
prototype: 'Prototype (rapid development)',
v3: 'V3 (alpha)'
v3: 'V3 (alpha)',
}

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

0 comments on commit 5994ccd

Please sign in to comment.