create-vuetify 1.0.8 → 1.1.1

package/dist/output.cjs

@@ -118,12 +118,13 @@ var promptQuestions = (context) => [
   {
     name: "usePackageManager",
     type: "select",
-    message: "Would you like to install dependencies with yarn, npm, or pnpm?",
+    message: "Would you like to install dependencies with yarn, npm, pnpm, or bun?",
     initial: 0,
     choices: [
       { title: "yarn", value: "yarn" },
       { title: "npm", value: "npm" },
       { title: "pnpm", value: "pnpm" },
+      { title: "bun", value: "bun" },
       { title: "none", value: null }
     ]
   }
@@ -154,7 +155,7 @@ var import_minimist = __toESM(require("minimist"), 1);
 // src/utils/installDependencies.ts
 var import_child_process = require("child_process");
 function installDependencies(projectRoot, packageManager) {
-  const cmd = packageManager === "npm" ? "npm install" : packageManager === "yarn" ? "yarn" : "pnpm install";
+  const cmd = packageManager === "npm" ? "npm install" : packageManager === "yarn" ? "yarn" : packageManager === "bun" ? "bun install" : "pnpm install";
   const spawn = (0, import_child_process.spawnSync)(cmd, {
     cwd: projectRoot,
     stdio: ["inherit", "inherit", "pipe"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vuetify",
-  "version": "1.0.8",
+  "version": "1.1.1",
   "main": "dist/output.cjs",
   "author": "Elijah Kotyluk <elijah@elijahkotyluk.com>",
   "license": "MIT",

package/template/javascript/base/README.md

@@ -11,6 +11,9 @@ npm install
 
 # pnpm
 pnpm install
+
+# pnpm
+bun install
 ```
 
 ### Compiles and hot-reloads for development
@@ -24,6 +27,9 @@ npm run dev
 
 # pnpm
 pnpm dev
+
+# bun
+bun run dev
 ```
 
 ### Compiles and minifies for production
@@ -37,6 +43,9 @@ npm run build
 
 # pnpm
 pnpm build
+
+# bun
+bun run build
 ```
 
 ### Lints and fixes files
@@ -50,6 +59,9 @@ npm run lint
 
 # pnpm
 pnpm lint
+
+# bun
+bun run lint
 ```
 
 ### Customize configuration

package/template/javascript/base/package.json

@@ -13,8 +13,7 @@
     "roboto-fontface": "*",
     "vue": "^3.2.0",
     "vue-router": "^4.0.0",
-    "vuetify": "^3.0.0",
-    "webfontloader": "^1.0.0"
+    "vuetify": "^3.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",
@@ -22,6 +21,7 @@
     "eslint-plugin-vue": "^9.3.0",
     "sass": "^1.60.0",
     "vite": "^4.2.0",
-    "vite-plugin-vuetify": "^1.0.0"
+    "vite-plugin-vuetify": "^1.0.0",
+    "unplugin-fonts": "^1.0.3"
   }
 }

package/template/javascript/base/src/main.js

@@ -4,15 +4,15 @@
  * Bootstraps Vuetify and other plugins then mounts the App`
  */
 
+// Plugins
+import { registerPlugins } from '@/plugins'
+
 // Components
 import App from './App.vue'
 
 // Composables
 import { createApp } from 'vue'
 
-// Plugins
-import { registerPlugins } from '@/plugins'
-
 const app = createApp(App)
 
 registerPlugins(app)

package/template/javascript/base/src/plugins/index.js

@@ -5,12 +5,10 @@
  */
 
 // Plugins
-import { loadFonts } from './webfontloader'
 import vuetify from './vuetify'
 import router from '../router'
 
 export function registerPlugins (app) {
-  loadFonts()
   app
     .use(vuetify)
     .use(router)

package/template/javascript/base/src/router/index.js

@@ -10,9 +10,9 @@ const routes = [
         path: '',
         name: 'Home',
         // route level code-splitting
-        // this generates a separate chunk (about.[hash].js) for this route
+        // this generates a separate chunk (Home-[hash].js) for this route
         // which is lazy-loaded when the route is visited.
-        component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
+        component: () => import('@/views/Home.vue'),
       },
     ],
   },

package/template/javascript/base/vite.config.js

@@ -1,6 +1,7 @@
 // Plugins
 import vue from '@vitejs/plugin-vue'
 import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+import ViteFonts from 'unplugin-fonts/vite'
 
 // Utilities
 import { defineConfig } from 'vite'
@@ -9,16 +10,24 @@ import { fileURLToPath, URL } from 'node:url'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue({ 
+    vue({
       template: { transformAssetUrls }
     }),
-    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
+    // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
     vuetify({
       autoImport: true,
       styles: {
         configFile: 'src/styles/settings.scss',
       },
     }),
+    ViteFonts({
+      google: {
+        families: [{
+          name: 'Roboto',
+          styles: 'wght@100;300;400;500;700;900',
+        }],
+      },
+    }),
   ],
   define: { 'process.env': {} },
   resolve: {

package/template/javascript/custom/router/src/plugins/index.js

@@ -5,12 +5,10 @@
  */
 
 // Plugins
-import { loadFonts } from './webfontloader'
 import vuetify from './vuetify'
 import router from '../router'
 
 export function registerPlugins (app) {
-  loadFonts()
   app
     .use(vuetify)
     .use(router)

package/template/javascript/custom/router/src/router/index.js

@@ -10,9 +10,9 @@ const routes = [
         path: '',
         name: 'Home',
         // route level code-splitting
-        // this generates a separate chunk (about.[hash].js) for this route
+        // this generates a separate chunk (Home-[hash].js) for this route
         // which is lazy-loaded when the route is visited.
-        component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
+        component: () => import('@/views/Home.vue'),
       },
     ],
   },

package/template/javascript/custom/router-pinia/src/plugins/index.js

@@ -5,13 +5,11 @@
  */
 
 // Plugins
-import { loadFonts } from './webfontloader'
 import vuetify from './vuetify'
 import pinia from '../store'
 import router from '../router'
 
 export function registerPlugins (app) {
-  loadFonts()
   app
     .use(vuetify)
     .use(pinia)

package/template/javascript/custom/store/src/plugins/index.js

@@ -5,12 +5,10 @@
  */
 
 // Plugins
-import { loadFonts } from './webfontloader'
 import vuetify from './vuetify'
 import pinia from '../store'
 
 export function registerPlugins (app) {
-  loadFonts()
   app
     .use(vuetify)
     .use(pinia)

package/template/javascript/default/README.md

@@ -11,6 +11,9 @@ npm install
 
 # pnpm
 pnpm install
+
+# bun
+bun install
 ```
 
 ### Compiles and hot-reloads for development
@@ -24,6 +27,9 @@ npm run dev
 
 # pnpm
 pnpm dev
+
+# bun
+bun run dev
 ```
 
 ### Compiles and minifies for production
@@ -37,6 +43,9 @@ npm run build
 
 # pnpm
 pnpm build
+
+# bun
+bun run build
 ```
 
 ### Customize configuration

package/template/javascript/default/package.json

@@ -9,12 +9,12 @@
     "@mdi/font": "7.0.96",
     "roboto-fontface": "*",
     "vue": "^3.2.0",
-    "vuetify": "^3.0.0",
-    "webfontloader": "^1.0.0"
+    "vuetify": "^3.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",
     "vite-plugin-vuetify": "^1.0.0",
-    "vite": "^4.2.0"
+    "vite": "^4.2.0",
+    "unplugin-fonts": "^1.0.3"
   }
 }

package/template/javascript/default/src/main.js

@@ -4,15 +4,15 @@
  * Bootstraps Vuetify and other plugins then mounts the App`
  */
 
+// Plugins
+import { registerPlugins } from '@/plugins'
+
 // Components
 import App from './App.vue'
 
 // Composables
 import { createApp } from 'vue'
 
-// Plugins
-import { registerPlugins } from '@/plugins'
-
 const app = createApp(App)
 
 registerPlugins(app)

package/template/javascript/default/src/plugins/index.js

@@ -5,10 +5,8 @@
  */
 
 // Plugins
-import { loadFonts } from './webfontloader'
 import vuetify from './vuetify'
 
 export function registerPlugins (app) {
-  loadFonts()
   app.use(vuetify)
 }

package/template/javascript/default/vite.config.js

@@ -1,6 +1,7 @@
 // Plugins
 import vue from '@vitejs/plugin-vue'
 import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+import ViteFonts from 'unplugin-fonts/vite'
 
 // Utilities
 import { defineConfig } from 'vite'
@@ -9,13 +10,21 @@ import { fileURLToPath, URL } from 'node:url'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue({ 
+    vue({
       template: { transformAssetUrls }
     }),
-    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
+    // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
     vuetify({
       autoImport: true,
     }),
+    ViteFonts({
+      google: {
+        families: [{
+          name: 'Roboto',
+          styles: 'wght@100;300;400;500;700;900',
+        }],
+      },
+    }),
   ],
   define: { 'process.env': {} },
   resolve: {

package/template/javascript/essentials/README.md

@@ -11,6 +11,9 @@ npm install
 
 # pnpm
 pnpm install
+
+# bun
+bun install
 ```
 
 ### Compiles and hot-reloads for development
@@ -24,6 +27,9 @@ npm run dev
 
 # pnpm
 pnpm dev
+
+# bun
+bun run dev
 ```
 
 ### Compiles and minifies for production
@@ -37,6 +43,9 @@ npm run build
 
 # pnpm
 pnpm build
+
+# bun
+bun run build
 ```
 
 ### Lints and fixes files
@@ -50,6 +59,9 @@ npm run lint
 
 # pnpm
 pnpm lint
+
+# bun
+bun run lint
 ```
 
 ### Customize configuration

package/template/javascript/essentials/package.json

@@ -14,8 +14,7 @@
     "roboto-fontface": "*",
     "vue": "^3.2.0",
     "vue-router": "^4.0.0",
-    "vuetify": "^3.0.0",
-    "webfontloader": "^1.0.0"
+    "vuetify": "^3.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",
@@ -23,6 +22,7 @@
     "eslint-plugin-vue": "^9.3.0",
     "sass": "^1.60.0",
     "vite": "^4.2.0",
-    "vite-plugin-vuetify": "^1.0.0"
+    "vite-plugin-vuetify": "^1.0.0",
+    "unplugin-fonts": "^1.0.3"
   }
 }

package/template/javascript/essentials/src/main.js

@@ -4,15 +4,15 @@
  * Bootstraps Vuetify and other plugins then mounts the App`
  */
 
+// Plugins
+import { registerPlugins } from '@/plugins'
+
 // Components
 import App from './App.vue'
 
 // Composables
 import { createApp } from 'vue'
 
-// Plugins
-import { registerPlugins } from '@/plugins'
-
 const app = createApp(App)
 
 registerPlugins(app)

package/template/javascript/essentials/src/plugins/index.js

@@ -5,13 +5,11 @@
  */
 
 // Plugins
-import { loadFonts } from './webfontloader'
 import vuetify from './vuetify'
 import pinia from '../store'
 import router from '../router'
 
 export function registerPlugins (app) {
-  loadFonts()
   app
     .use(vuetify)
     .use(router)

package/template/javascript/essentials/src/router/index.js

@@ -10,9 +10,9 @@ const routes = [
         path: '',
         name: 'Home',
         // route level code-splitting
-        // this generates a separate chunk (about.[hash].js) for this route
+        // this generates a separate chunk (Home-[hash].js) for this route
         // which is lazy-loaded when the route is visited.
-        component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
+        component: () => import('@/views/Home.vue'),
       },
     ],
   },

package/template/javascript/essentials/vite.config.js

@@ -1,6 +1,7 @@
 // Plugins
 import vue from '@vitejs/plugin-vue'
 import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+import ViteFonts from 'unplugin-fonts/vite'
 
 // Utilities
 import { defineConfig } from 'vite'
@@ -9,16 +10,24 @@ import { fileURLToPath, URL } from 'node:url'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue({ 
+    vue({
       template: { transformAssetUrls }
     }),
-    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
+    // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
     vuetify({
       autoImport: true,
       styles: {
         configFile: 'src/styles/settings.scss',
       },
     }),
+    ViteFonts({
+      google: {
+        families: [{
+          name: 'Roboto',
+          styles: 'wght@100;300;400;500;700;900',
+        }],
+      },
+    }),
   ],
   define: { 'process.env': {} },
   resolve: {

package/template/typescript/base/README.md

@@ -11,6 +11,9 @@ npm install
 
 # pnpm
 pnpm install
+
+# bun
+bun install
 ```
 
 ### Compiles and hot-reloads for development
@@ -24,6 +27,9 @@ npm run dev
 
 # pnpm
 pnpm dev
+
+# bun
+pnpm run dev
 ```
 
 ### Compiles and minifies for production
@@ -37,6 +43,9 @@ npm run build
 
 # pnpm
 pnpm build
+
+# bun
+pnpm run build
 ```
 
 ### Lints and fixes files
@@ -50,6 +59,9 @@ npm run lint
 
 # pnpm
 pnpm lint
+
+# bun
+pnpm run lint
 ```
 
 ### Customize configuration

package/template/typescript/base/package.json

@@ -13,13 +13,11 @@
     "roboto-fontface": "*",
     "vue": "^3.2.0",
     "vue-router": "^4.0.0",
-    "vuetify": "^3.0.0",
-    "webfontloader": "^1.0.0"
+    "vuetify": "^3.0.0"
   },
   "devDependencies": {
     "@babel/types": "^7.21.4",
     "@types/node": "^18.15.0",
-    "@types/webfontloader": "^1.6.35",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",
     "eslint": "^8.22.0",
@@ -28,6 +26,7 @@
     "typescript": "^5.0.0",
     "vite": "^4.2.0",
     "vite-plugin-vuetify": "^1.0.0",
-    "vue-tsc": "^1.2.0"
+    "vue-tsc": "^1.2.0",
+    "unplugin-fonts": "^1.0.3"
   }
 }

package/template/typescript/base/src/main.ts

@@ -4,15 +4,15 @@
  * Bootstraps Vuetify and other plugins then mounts the App`
  */
 
+// Plugins
+import { registerPlugins } from '@/plugins'
+
 // Components
 import App from './App.vue'
 
 // Composables
 import { createApp } from 'vue'
 
-// Plugins
-import { registerPlugins } from '@/plugins'
-
 const app = createApp(App)
 
 registerPlugins(app)

package/template/typescript/base/src/plugins/index.ts

@@ -5,7 +5,6 @@
  */
 
 // Plugins
-import { loadFonts } from './webfontloader'
 import vuetify from './vuetify'
 import router from '../router'
 
@@ -13,7 +12,6 @@ import router from '../router'
 import type { App } from 'vue'
 
 export function registerPlugins (app: App) {
-  loadFonts()
   app
     .use(vuetify)
     .use(router)

package/template/typescript/base/src/router/index.ts

@@ -10,9 +10,9 @@ const routes = [
         path: '',
         name: 'Home',
         // route level code-splitting
-        // this generates a separate chunk (about.[hash].js) for this route
+        // this generates a separate chunk (Home-[hash].js) for this route
         // which is lazy-loaded when the route is visited.
-        component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
+        component: () => import('@/views/Home.vue'),
       },
     ],
   },

package/template/typescript/base/vite.config.ts

@@ -1,6 +1,7 @@
 // Plugins
 import vue from '@vitejs/plugin-vue'
 import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+import ViteFonts from 'unplugin-fonts/vite'
 
 // Utilities
 import { defineConfig } from 'vite'
@@ -9,31 +10,33 @@ import { fileURLToPath, URL } from 'node:url'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue({ 
-      template: { transformAssetUrls }
+    vue({
+      template: { transformAssetUrls },
     }),
-    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
+    // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
     vuetify({
       autoImport: true,
       styles: {
         configFile: 'src/styles/settings.scss',
       },
     }),
+    ViteFonts({
+      google: {
+        families: [
+          {
+            name: 'Roboto',
+            styles: 'wght@100;300;400;500;700;900',
+          },
+        ],
+      },
+    }),
   ],
   define: { 'process.env': {} },
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
-    extensions: [
-      '.js',
-      '.json',
-      '.jsx',
-      '.mjs',
-      '.ts',
-      '.tsx',
-      '.vue',
-    ],
+    extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
   },
   server: {
     port: 3000,

package/template/typescript/custom/router/src/plugins/index.ts

@@ -5,7 +5,6 @@
  */
 
 // Plugins
-import { loadFonts } from './webfontloader'
 import vuetify from './vuetify'
 import router from '../router'
 
@@ -13,7 +12,6 @@ import router from '../router'
 import type { App } from 'vue'
 
 export function registerPlugins (app: App) {
-  loadFonts()
   app
     .use(vuetify)
     .use(router)

package/template/typescript/custom/router/src/router/index.ts

@@ -10,9 +10,9 @@ const routes = [
         path: '',
         name: 'Home',
         // route level code-splitting
-        // this generates a separate chunk (about.[hash].js) for this route
+        // this generates a separate chunk (Home-[hash].js) for this route
         // which is lazy-loaded when the route is visited.
-        component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
+        component: () => import('@/views/Home.vue'),
       },
     ],
   },

package/template/typescript/custom/router-pinia/src/plugins/index.ts

@@ -5,7 +5,6 @@
  */
 
 // Plugins
-import { loadFonts } from './webfontloader'
 import vuetify from './vuetify'
 import pinia from '../store'
 import router from '../router'
@@ -14,7 +13,6 @@ import router from '../router'
 import type { App } from 'vue'
 
 export function registerPlugins (app: App) {
-  loadFonts()
   app
     .use(vuetify)
     .use(router)

package/template/typescript/custom/store/src/plugins/index.ts

@@ -5,7 +5,6 @@
  */
 
 // Plugins
-import { loadFonts } from './webfontloader'
 import vuetify from './vuetify'
 import pinia from '../store'
 
@@ -13,7 +12,6 @@ import pinia from '../store'
 import type { App } from 'vue'
 
 export function registerPlugins (app: App) {
-  loadFonts()
   app
     .use(vuetify)
     .use(pinia)

package/template/typescript/default/README.md

@@ -11,6 +11,9 @@ npm install
 
 # pnpm
 pnpm install
+
+# bun
+bun install
 ```
 
 ### Compiles and hot-reloads for development
@@ -24,6 +27,9 @@ npm run dev
 
 # pnpm
 pnpm dev
+
+# bun
+bun run dev
 ```
 
 ### Compiles and minifies for production
@@ -37,6 +43,9 @@ npm run build
 
 # pnpm
 pnpm build
+
+# bun
+bun run build
 ```
 
 ### Customize configuration

package/template/typescript/default/package.json

@@ -9,17 +9,16 @@
     "@mdi/font": "7.0.96",
     "roboto-fontface": "*",
     "vue": "^3.2.0",
-    "vuetify": "^3.0.0",
-    "webfontloader": "^1.0.0"
+    "vuetify": "^3.0.0"
   },
   "devDependencies": {
     "@babel/types": "^7.21.4",
     "@types/node": "^18.15.0",
-    "@types/webfontloader": "^1.6.35",
     "@vitejs/plugin-vue": "^4.0.0",
     "typescript": "^5.0.0",
     "vite": "^4.2.0",
     "vite-plugin-vuetify": "^1.0.0",
-    "vue-tsc": "^1.2.0"
+    "vue-tsc": "^1.2.0",
+    "unplugin-fonts": "^1.0.3"
   }
 }

package/template/typescript/default/src/main.ts

@@ -4,15 +4,15 @@
  * Bootstraps Vuetify and other plugins then mounts the App`
  */
 
+// Plugins
+import { registerPlugins } from '@/plugins'
+
 // Components
 import App from './App.vue'
 
 // Composables
 import { createApp } from 'vue'
 
-// Plugins
-import { registerPlugins } from '@/plugins'
-
 const app = createApp(App)
 
 registerPlugins(app)

package/template/typescript/default/src/plugins/index.ts

@@ -5,13 +5,11 @@
  */
 
 // Plugins
-import { loadFonts } from './webfontloader'
 import vuetify from './vuetify'
 
 // Types
 import type { App } from 'vue'
 
 export function registerPlugins (app: App) {
-  loadFonts()
   app.use(vuetify)
 }

package/template/typescript/default/vite.config.ts

@@ -1,6 +1,7 @@
 // Plugins
 import vue from '@vitejs/plugin-vue'
 import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+import ViteFonts from 'unplugin-fonts/vite'
 
 // Utilities
 import { defineConfig } from 'vite'
@@ -9,28 +10,30 @@ import { fileURLToPath, URL } from 'node:url'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue({ 
-      template: { transformAssetUrls }
+    vue({
+      template: { transformAssetUrls },
     }),
-    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
+    // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
     vuetify({
       autoImport: true,
     }),
+    ViteFonts({
+      google: {
+        families: [
+          {
+            name: 'Roboto',
+            styles: 'wght@100;300;400;500;700;900',
+          },
+        ],
+      },
+    }),
   ],
   define: { 'process.env': {} },
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
-    extensions: [
-      '.js',
-      '.json',
-      '.jsx',
-      '.mjs',
-      '.ts',
-      '.tsx',
-      '.vue',
-    ],
+    extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
   },
   server: {
     port: 3000,

package/template/typescript/essentials/README.md

@@ -11,6 +11,9 @@ npm install
 
 # pnpm
 pnpm install
+
+# bun 
+bun install
 ```
 
 ### Compiles and hot-reloads for development
@@ -24,6 +27,9 @@ npm run dev
 
 # pnpm
 pnpm dev
+
+# bun 
+bun run dev
 ```
 
 ### Compiles and minifies for production
@@ -37,6 +43,9 @@ npm run build
 
 # pnpm
 pnpm build
+
+# bun 
+bun run build
 ```
 
 ### Lints and fixes files
@@ -50,6 +59,9 @@ npm run lint
 
 # pnpm
 pnpm lint
+
+# bun 
+bun run lint
 ```
 
 ### Customize configuration

package/template/typescript/essentials/package.json

@@ -14,13 +14,11 @@
     "roboto-fontface": "*",
     "vue": "^3.2.0",
     "vue-router": "^4.0.0",
-    "vuetify": "^3.0.0",
-    "webfontloader": "^1.0.0"
+    "vuetify": "^3.0.0"
   },
   "devDependencies": {
     "@babel/types": "^7.21.4",
     "@types/node": "^18.15.0",
-    "@types/webfontloader": "^1.6.35",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",
     "eslint": "^8.37.0",
@@ -29,6 +27,7 @@
     "typescript": "^5.0.0",
     "vite": "^4.2.0",
     "vite-plugin-vuetify": "^1.0.0",
-    "vue-tsc": "^1.2.0"
+    "vue-tsc": "^1.2.0",
+    "unplugin-fonts": "^1.0.3"
   }
 }

package/template/typescript/essentials/src/main.ts

@@ -4,15 +4,15 @@
  * Bootstraps Vuetify and other plugins then mounts the App`
  */
 
+// Plugins
+import { registerPlugins } from '@/plugins'
+
 // Components
 import App from './App.vue'
 
 // Composables
 import { createApp } from 'vue'
 
-// Plugins
-import { registerPlugins } from '@/plugins'
-
 const app = createApp(App)
 
 registerPlugins(app)

package/template/typescript/essentials/src/plugins/index.ts

@@ -5,7 +5,6 @@
  */
 
 // Plugins
-import { loadFonts } from './webfontloader'
 import vuetify from './vuetify'
 import pinia from '../store'
 import router from '../router'
@@ -14,7 +13,6 @@ import router from '../router'
 import type { App } from 'vue'
 
 export function registerPlugins (app: App) {
-  loadFonts()
   app
     .use(vuetify)
     .use(router)

package/template/typescript/essentials/src/router/index.ts

@@ -10,9 +10,9 @@ const routes = [
         path: '',
         name: 'Home',
         // route level code-splitting
-        // this generates a separate chunk (about.[hash].js) for this route
+        // this generates a separate chunk (Home-[hash].js) for this route
         // which is lazy-loaded when the route is visited.
-        component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
+        component: () => import('@/views/Home.vue'),
       },
     ],
   },

package/template/typescript/essentials/tsconfig.json

@@ -19,7 +19,7 @@
     ],
     "paths": {
       "@/*": ["src/*"]
-    },
+    }
   },
   "include": [
     "src/**/*.ts",

package/template/typescript/essentials/vite.config.ts

@@ -1,6 +1,7 @@
 // Plugins
 import vue from '@vitejs/plugin-vue'
 import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+import ViteFonts from 'unplugin-fonts/vite'
 
 // Utilities
 import { defineConfig } from 'vite'
@@ -9,31 +10,33 @@ import { fileURLToPath, URL } from 'node:url'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue({ 
-      template: { transformAssetUrls }
+    vue({
+      template: { transformAssetUrls },
     }),
-    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
+    // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
     vuetify({
       autoImport: true,
       styles: {
         configFile: 'src/styles/settings.scss',
       },
     }),
+    ViteFonts({
+      google: {
+        families: [
+          {
+            name: 'Roboto',
+            styles: 'wght@100;300;400;500;700;900',
+          },
+        ],
+      },
+    }),
   ],
   define: { 'process.env': {} },
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
-    extensions: [
-      '.js',
-      '.json',
-      '.jsx',
-      '.mjs',
-      '.ts',
-      '.tsx',
-      '.vue',
-    ],
+    extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
   },
   server: {
     port: 3000,

package/template/javascript/base/src/plugins/webfontloader.js

@@ -1,15 +0,0 @@
-/**
- * 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'],
-    },
-  })
-}

package/template/javascript/default/src/plugins/webfontloader.js

@@ -1,15 +0,0 @@
-/**
- * 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'],
-    },
-  })
-}

package/template/javascript/essentials/src/plugins/webfontloader.js

@@ -1,15 +0,0 @@
-/**
- * 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'],
-    },
-  })
-}

package/template/typescript/base/src/plugins/webfontloader.ts

@@ -1,15 +0,0 @@
-/**
- * plugins/webfontloader.ts
- *
- * 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'],
-    },
-  })
-}

package/template/typescript/default/src/plugins/webfontloader.ts

@@ -1,15 +0,0 @@
-/**
- * plugins/webfontloader.ts
- *
- * 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'],
-    },
-  })
-}

package/template/typescript/essentials/src/plugins/webfontloader.ts

@@ -1,15 +0,0 @@
-/**
- * plugins/webfontloader.ts
- *
- * 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'],
-    },
-  })
-}