feat(v3-preset): add v3 preset

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

@@ -10,16 +10,16 @@ module.exports = (api, opts) => {
 
   // Add imports
   // Must be before dependencies because of weird bug
-  vuetify.addImports(api)
+  if (!opts.useV3) vuetify.addImports(api)
   if (!opts.useAlaCarte && opts.usePolyfill) polyfill.addImports(api)
-  if (opts.installFonts) fonts.addImports(api, opts.iconFont)
+  if (opts.installFonts && !opts.useV3) fonts.addImports(api, opts.iconFont)
 
   // Add dependencies
-  vuetify.addDependencies(api)
+  vuetify.addDependencies(api, opts.useV3)
   if (opts.useAlaCarte) alaCarte.addDependencies(api)
   else if (opts.usePolyfill) polyfill.addDependencies(api)
 
-  if (opts.installFonts) fonts.addDependencies(api, opts.iconFont)
+  if (opts.installFonts) fonts.addDependencies(api, opts.iconFont, opts.useV3)
 
   // Update vue.config.js for transpileDependency if AlaCarte
   if (opts.useAlaCarte) alaCarte.addVueConfigTranspileDependency(api)

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

@@ -0,0 +1,27 @@
+<template>
+  <%_ if (router) { _%>
+  <router-view/>
+  <%_ } else { _%>
+  <HelloWorld/>
+  <%_ } _%>
+</template>
+
+<script>
+<%_ if (!router) { _%>
+import HelloWorld from './components/HelloWorld';
+<%_ } _%>
+
+export default {
+  name: 'App',
+
+  <%_ if (!router) { _%>
+  components: {
+    HelloWorld,
+  },
+
+  <%_ } _%>
+  data: () => ({
+    //
+  }),
+};
+</script>

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

@@ -0,0 +1,11 @@
+<template>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'App',
+  components: {}
+});
+</script>

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

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h1>{{ msg }}</h1>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'HelloWorld',
+
+    props: {
+      msg: String,
+    },
+  }
+</script>

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

@@ -0,0 +1,16 @@
+import { createApp } from "vue";
+import vuetify from "./vuetify";
+import App from "./App";
+
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+
+library.add(fas);
+
+const app = createApp(App);
+
+app.use(vuetify);
+app.component("FontAwesomeIcon", FontAwesomeIcon);
+
+app.mount("#app");

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

@@ -0,0 +1,18 @@
+import "@mdi/font/css/materialdesignicons.css";
+import { createVuetify } from "vuetify";
+import { aliases, mdi } from "vuetify/src/iconsets/mdi";
+import { fa } from "vuetify/src/iconsets/fa-svg";
+
+export default createVuetify({
+  // lang: {
+  //   locales,
+  // },
+  icons: {
+    defaultSet: "mdi",
+    aliases,
+    sets: {
+      mdi,
+      fa,
+    },
+  },
+});

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

@@ -0,0 +1,16 @@
+import { createRouter } from 'vue-router'
+import Home from '../views/Home.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home,
+  },
+]
+
+const router = createRouter({
+  routes,
+})
+
+export default router

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

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <HelloWorld msg="Welcome to Your Vuetify.js App" />
+  </div>
+</template>
+
+<script>
+  import HelloWorld from '../components/HelloWorld.vue'
+
+  export default {
+    name: 'Home',
+
+    components: {
+      HelloWorld,
+    },
+  }
+</script>

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

@@ -37,13 +37,23 @@ const fonts = {
   },
 }
 
-function addDependencies (api, iconFont) {
-  api.extendPackage({
+function addDependencies (api, iconFont, useV3) {
+  let pkgOpts = {
     dependencies: {
       ...fonts.roboto.package,
       ...fonts[iconFont].package,
-    },
-  })
+    }
+  }
+
+  if (useV3) pkgOpts = {
+    ...pkgOpts,
+    // Use specified version or latest?
+    "@fortawesome/fontawesome-svg-core": "latest",
+    "@fortawesome/free-solid-svg-icons": "latest",
+    "@fortawesome/vue-fontawesome": "latest",
+  }
+
+  api.extendPackage(pkgOpts)
 }
 
 function addImports (api, iconFont) {

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

@@ -1,27 +1,28 @@
 // Imports
-const fs = require('fs')
 const helpers = require('./helpers')
 
-function addDependencies (api) {
+function addDependencies (api, v3) {
   api.extendPackage({
     dependencies: {
-      vuetify: '^2.4.0',
+      // Will currently prompt to select version for v3 preset, until v3 is released.
+      vuetify: v3 ? '^3.0.0-alpha.0' : '^2.4.0',
     },
   })
 }
 
 function renderFiles (api, { opts }) {
-  const ext = api.hasPlugin('typescript') ? 'ts' : 'js'
+  const hasTS = api.hasPlugin('typescript')
+  const ext = hasTS ? 'ts' : 'js'
   const pluginFilename = `vuetify.${ext}`
 
   api.render({
-    [`./src/plugins/${pluginFilename}`]: '../templates/default/src/plugins/vuetify.js',
+    [`./src/plugins/${pluginFilename}`]: opts.useV3 ? '../templates/v3/src/plugins/vuetify.js' : '../templates/default/src/plugins/vuetify.js',
   }, {
     ...opts,
-    typescript: api.hasPlugin('typescript'),
+    typescript: hasTS,
   })
 
-  if (api.hasPlugin('typescript') && opts.useAlaCarte) {
+  if (hasTS && opts.useAlaCarte) {
     api.render({
       './src/shims-vuetify.d.ts': '../templates/default/src/shims-vuetify.d.ts',
     })
@@ -30,26 +31,39 @@ function renderFiles (api, { opts }) {
   // Render files if we're replacing
   const fs = require('fs')
   const routerPath = api.resolve(`./src/router.${ext}`)
+  let files
   opts.router = fs.existsSync(routerPath)
 
+  // replaceComponents is always true
   if (opts.replaceComponents) {
-    const files = {
-      './src/App.vue': `../templates/default/src/App.${ext}.vue`,
-      './src/assets/logo.svg': '../templates/default/src/assets/logo.svg',
-      './src/components/HelloWorld.vue': `../templates/default/src/components/HelloWorld.${ext}.vue`,
+    if (opts.useV3) {
+      files = {
+        "./src/App.vue": `../templates/v3/src/App.${ext}.vue`,
+        "./src/assets/logo.svg": "../templates/v3/src/assets/logo.svg",
+        "./src/components/HelloWorld.vue": `../templates/v3/src/components/HelloWorld.${ext}.vue`,
+        [api.entryFile]: "../templates/v3/src/main.js",
+      };
+    } else {
+      files = {
+        './src/App.vue': `../templates/default/src/App.${ext}.vue`,
+        './src/assets/logo.svg': '../templates/default/src/assets/logo.svg',
+        './src/components/HelloWorld.vue': `../templates/default/src/components/HelloWorld.${ext}.vue`,
+      }
     }
 
     if (opts.router) {
-      files['./src/views/Home.vue'] = `../templates/default/src/views/Home.${ext}.vue`
+      files["./src/views/Home.vue"] = opts.v3
+        ? "../templates/v3/src/views/Home.js.vue"
+        : `../templates/default/src/views/Home.${ext}.vue`
     }
 
     api.render(files, opts)
   }
 }
 
 function addImports (api) {
-  api.injectImports(api.entryFile, 'import vuetify from \'./plugins/vuetify\';')
-  api.injectRootOptions(api.entryFile, 'vuetify')
+  api.injectImports(api.entryFile, "import vuetify from './plugins/vuetify';");
+  api.injectRootOptions(api.entryFile, "vuetify");
 }
 
 function setHtmlLang (api, locale) {

packages/vue-cli-plugin-vuetify/presets/v3.json

@@ -0,0 +1,18 @@
+{
+  "useConfigFiles": true,
+  "cssPreprocessor": "scss",
+  "plugins": {
+    "vue-cli-plugin-vuetify": {
+      "preset": "configure",
+      "replaceComponents": true,
+      "iconFont": "mdi",
+      "installFonts": false,
+      "locale": "en",
+      "useAlaCarte": true,
+      "useCustomProperties": false,
+      "usePolyfill": false,
+      "useTheme": false,
+      "useV3": true
+    }
+  }
+}

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

@@ -5,6 +5,7 @@ const resolve = file => path.resolve(__dirname, file)
 const PRESET_MAP = {
   default: 'Default (recommended)',
   prototype: 'Prototype (rapid development)',
+  v3: 'V3 (alpha)'
 }
 
 module.exports = fs.readdirSync(resolve('../presets')).map(preset => {