chore(cli-plugin): clean up v3 template (#283)

Co-authored-by: John Leider <john.j.leider@gmail.com>

Author: ElijahKotyluk

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

@@ -15,7 +15,7 @@ module.exports = (api, opts) => {
   // Must be before dependencies because of weird bug
   if (!opts.useV3) vuetify.addImports(api)
   if (!opts.useAlaCarte && opts.usePolyfill) polyfill.addImports(api)
-  if (opts.installFonts && !opts.useV3) fonts.addImports(api, opts.iconFont)
+  if (opts.installFonts) opts.useV3 ? fonts.addPlugin(api, opts) : fonts.addImports(api, opts.iconFont)
 
   // Add dependencies
   vuetify.addDependencies(api, opts.useV3)

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

@@ -1,20 +1,23 @@
 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'
 <%_ } _%>
+import vuetify from './plugins/vuetify'
 
-const app = createApp(App)
+<%_ if (useV3) { _%>
+loadFonts()
+<%_ } _%>
+
+createApp(App)
 <%_ if (router) { _%>
-app.use(router)
+  .use(router)
 <%_ } _%>
 <%_ if (store) { _%>
-app.use(store)
+  .use(store)
 <%_ } _%>
-app.use(vuetify)
-
-app.mount('#app')
+  .use(vuetify)
+  .mount('#app')

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

@@ -1,19 +1,23 @@
 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'
 <%_ } _%>
+import vuetify from './plugins/vuetify'
+
+<%_ if (useV3) { _%>
+loadFonts()
+<%_ } _%>
 
 createApp(App)
-  <%_ if (router) { _%>
+<%_ if (router) { _%>
   .use(router)
-  <%_ } _%>
-  <%_ if (store) { _%>
+<%_ } _%>
+<%_ if (store) { _%>
   .use(store)
-  <%_ } _%>
+<%_ } _%>
   .use(vuetify)
   .mount('#app')

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

@@ -1,5 +1,8 @@
+// Styles
 import '@mdi/font/css/materialdesignicons.css'
 import 'vuetify/styles'
+
+// Vuetify
 import { createVuetify } from 'vuetify'
 
 export default createVuetify(

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

@@ -0,0 +1,15 @@
+/**
+ * plugins/webfontloader.js
+ *
+ * webfontloader documentation: https://github.com/typekit/webfontloader
+ */
+
+export async function loadFonts () {
+  const webFontLoader = await import(/* webpackChunkName: "webfontloader" */'webfontloader')
+
+  webFontLoader.load({
+    google: {
+      families: ['Roboto:100,300,400,500,700,900&display=swap'],
+    },
+  })
+}

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

@@ -0,0 +1,15 @@
+/**
+ * plugins/webfontloader.js
+ *
+ * webfontloader documentation: https://github.com/typekit/webfontloader
+ */
+
+export async function loadFonts () {
+  const webFontLoader = await import(/* webpackChunkName: "webfontloader" */'webfontloader')
+
+  webFontLoader.load({
+    google: {
+      families: ['Roboto:100,300,400,500,700,900&display=swap'],
+    },
+  })
+}

packages/vue-cli-plugin-vuetify/generator/templates/v3/vite/plugins/webfontloader.ts

@@ -0,0 +1,2 @@
+// Place SASS variable overrides here
+// $font-size-root: 18px;

packages/vue-cli-plugin-vuetify/generator/templates/v3/vite/styles/_variables.scss

@@ -67,8 +67,27 @@ function addLinks (api, iconFont) {
   })
 }
 
+function addPlugin(api, opts) {
+  opts.hasTS = api.hasPlugin('typescript')
+  const ext = opts.hasTS ? 'ts' : 'js'
+
+  api.injectImports(api.entryFile, `import { loadFonts } from './plugins/webfontloader'`)
+
+  api.extendPackage({
+    dependencies: {
+      webfontloader: '^1.0.0',
+    },
+    ...(opts.hasTS && { devDependencies: { '@types/webfontloader': '^1.0.0' }, }),
+  })
+
+  api.render({
+    [`./src/plugins/webfontloader.${ext}`]: `../templates/v3/vite/plugins/webfontloader.${ext}`,
+  }, opts)
+}
+
 module.exports = {
   addDependencies,
   addImports,
   addLinks,
+  addPlugin,
 }