create-vuetify 2.4.0 → 2.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vuetify",
-  "version": "2.4.0",
+  "version": "2.5.2",
   "author": "Elijah Kotyluk <elijah@elijahkotyluk.com>",
   "license": "MIT",
   "type": "module",
@@ -30,8 +30,9 @@
     "kolorist": "^1.8.0",
     "magicast": "^0.3.5",
     "minimist": "^1.2.8",
-    "package-manager-detector": "^1.0.0",
+    "package-manager-detector": "^1.2.0",
     "prompts": "^2.4.2",
+    "tinyexec": "^1.0.1",
     "validate-npm-package-name": "^6.0.0"
   },
   "devDependencies": {
@@ -42,7 +43,7 @@
     "@types/validate-npm-package-name": "^4.0.2",
     "esbuild": "^0.25.1",
     "eslint": "^9.23.0",
-    "eslint-config-vuetify": "^3.0.3",
+    "eslint-config-vuetify": "4.0.0",
     "nypm": "^0.6.0",
     "release-it": "^18.1.2",
     "typescript": "^5.8.2"

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

@@ -1 +1,3 @@
-export { default } from 'eslint-config-vuetify'
+import vuetify from 'eslint-config-vuetify'
+
+export default vuetify()

package/template/javascript/base/package.json

@@ -4,7 +4,7 @@
   },
   "devDependencies": {
     "eslint": "^9.23.0",
-    "eslint-config-vuetify": "^3.0.3",
+    "eslint-config-vuetify": "^4.0.0",
     "globals": "^16.0.0",
     "vue-router": "^4.5.0",
     "unplugin-vue-router": "^0.12.0"

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

@@ -16,12 +16,12 @@ const router = createRouter({
 // Workaround for https://github.com/vitejs/vite/issues/11804
 router.onError((err, to) => {
   if (err?.message?.includes?.('Failed to fetch dynamically imported module')) {
-    if (!localStorage.getItem('vuetify:dynamic-reload')) {
+    if (localStorage.getItem('vuetify:dynamic-reload')) {
+      console.error('Dynamic import error, reloading page did not fix it', err)
+    } else {
       console.log('Reloading page to fix dynamic import error')
       localStorage.setItem('vuetify:dynamic-reload', 'true')
       location.assign(to.fullPath)
-    } else {
-      console.error('Dynamic import error, reloading page did not fix it', err)
     }
   } else {
     console.error(err)

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

@@ -2,7 +2,7 @@
 import Components from 'unplugin-vue-components/vite'
 import Vue from '@vitejs/plugin-vue'
 import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
-import ViteFonts from 'unplugin-fonts/vite'
+import Fonts from 'unplugin-fonts/vite'
 import VueRouter from 'unplugin-vue-router/vite'
 
 // Utilities
@@ -24,12 +24,15 @@ export default defineConfig({
       },
     }),
     Components(),
-    ViteFonts({
-      google: {
-        families: [{
-          name: 'Roboto',
-          styles: 'wght@100;300;400;500;700;900',
-        }],
+    Fonts({
+      fontsource: {
+        families: [
+          {
+            name: 'Roboto',
+            weights: [100, 300, 400, 500, 700, 900],
+            styles: ['normal', 'italic'],
+          },
+        ],
       },
     }),
   ],
@@ -45,7 +48,7 @@ export default defineConfig({
   define: { 'process.env': {} },
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@': fileURLToPath(new URL('src', import.meta.url)),
     },
     extensions: [
       '.js',

package/template/javascript/default/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@mdi/font": "7.4.47",
-    "roboto-fontface": "*",
+    "@fontsource/roboto": "5.2.5",
     "vue": "^3.5.13",
     "vuetify": "^3.8.1"
   },
@@ -22,4 +22,4 @@
     "vite-plugin-vuetify": "^2.1.1",
     "vite": "^6.2.2"
   }
-}
+}

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

@@ -13,6 +13,9 @@ import App from './App.vue'
 // Composables
 import { createApp } from 'vue'
 
+// Styles
+import 'unfonts.css'
+
 const app = createApp(App)
 
 registerPlugins(app)

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

@@ -2,7 +2,7 @@
 import Components from 'unplugin-vue-components/vite'
 import Vue from '@vitejs/plugin-vue'
 import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
-import ViteFonts from 'unplugin-fonts/vite'
+import Fonts from 'unplugin-fonts/vite'
 
 // Utilities
 import { defineConfig } from 'vite'
@@ -17,12 +17,15 @@ export default defineConfig({
     // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
     Vuetify(),
     Components(),
-    ViteFonts({
-      google: {
-        families: [{
-          name: 'Roboto',
-          styles: 'wght@100;300;400;500;700;900',
-        }],
+    Fonts({
+      fontsource: {
+        families: [
+          {
+            name: 'Roboto',
+            weights: [100, 300, 400, 500, 700, 900],
+            styles: ['normal', 'italic'],
+          },
+        ],
       },
     }),
   ],
@@ -32,7 +35,7 @@ export default defineConfig({
   define: { 'process.env': {} },
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@': fileURLToPath(new URL('src', import.meta.url)),
     },
     extensions: [
       '.js',
@@ -53,7 +56,7 @@ export default defineConfig({
         api: 'modern-compiler',
       },
       scss: {
-        api:'modern-compiler',
+        api: 'modern-compiler',
       },
     },
   },

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

@@ -17,12 +17,12 @@ const router = createRouter({
 // Workaround for https://github.com/vitejs/vite/issues/11804
 router.onError((err, to) => {
   if (err?.message?.includes?.('Failed to fetch dynamically imported module')) {
-    if (!localStorage.getItem('vuetify:dynamic-reload')) {
+    if (localStorage.getItem('vuetify:dynamic-reload')) {
+      console.error('Dynamic import error, reloading page did not fix it', err)
+    } else {
       console.log('Reloading page to fix dynamic import error')
       localStorage.setItem('vuetify:dynamic-reload', 'true')
       location.assign(to.fullPath)
-    } else {
-      console.error('Dynamic import error, reloading page did not fix it', err)
     }
   } else {
     console.error(err)

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

@@ -41,7 +41,7 @@ export default defineConfig({
         'vue',
         VueRouterAutoImports,
         {
-          'pinia': ['defineStore', 'storeToRefs'],
+          pinia: ['defineStore', 'storeToRefs'],
         },
       ],
       eslintrc: {
@@ -62,7 +62,7 @@ export default defineConfig({
   define: { 'process.env': {} },
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@': fileURLToPath(new URL('src', import.meta.url)),
     },
     extensions: [
       '.js',

package/template/typescript/base/eslint.config.js

@@ -1 +1,3 @@
-export { default } from 'eslint-config-vuetify/index.ts.mjs'
+import vuetify from 'eslint-config-vuetify'
+
+export default vuetify()

package/template/typescript/base/package.json

@@ -4,7 +4,7 @@
   },
   "devDependencies": {
     "eslint": "^9.23.0",
-    "eslint-config-vuetify": "^3.0.3",
+    "eslint-config-vuetify": "^4.0.0",
     "vue-router": "^4.5.0",
     "unplugin-vue-router": "^0.12.0"
   }

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

@@ -16,12 +16,12 @@ const router = createRouter({
 // Workaround for https://github.com/vitejs/vite/issues/11804
 router.onError((err, to) => {
   if (err?.message?.includes?.('Failed to fetch dynamically imported module')) {
-    if (!localStorage.getItem('vuetify:dynamic-reload')) {
+    if (localStorage.getItem('vuetify:dynamic-reload')) {
+      console.error('Dynamic import error, reloading page did not fix it', err)
+    } else {
       console.log('Reloading page to fix dynamic import error')
       localStorage.setItem('vuetify:dynamic-reload', 'true')
       location.assign(to.fullPath)
-    } else {
-      console.error('Dynamic import error, reloading page did not fix it', err)
     }
   } else {
     console.error(err)

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

@@ -2,7 +2,7 @@
 import Components from 'unplugin-vue-components/vite'
 import Vue from '@vitejs/plugin-vue'
 import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
-import ViteFonts from 'unplugin-fonts/vite'
+import Fonts from 'unplugin-fonts/vite'
 import VueRouter from 'unplugin-vue-router/vite'
 
 // Utilities
@@ -12,7 +12,9 @@ import { fileURLToPath, URL } from 'node:url'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    VueRouter(),
+    VueRouter({
+      dts: 'src/typed-router.d.ts',
+    }),
     Vue({
       template: { transformAssetUrls },
     }),
@@ -23,13 +25,18 @@ export default defineConfig({
         configFile: 'src/styles/settings.scss',
       },
     }),
-    Components(),
-    ViteFonts({
-      google: {
-        families: [{
-          name: 'Roboto',
-          styles: 'wght@100;300;400;500;700;900',
-        }],
+    Components({
+      dts: 'src/components.d.ts',
+    }),
+    Fonts({
+      fontsource: {
+        families: [
+          {
+            name: 'Roboto',
+            weights: [100, 300, 400, 500, 700, 900],
+            styles: ['normal', 'italic'],
+          },
+        ],
       },
     }),
   ],
@@ -45,7 +52,7 @@ export default defineConfig({
   define: { 'process.env': {} },
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@': fileURLToPath(new URL('src', import.meta.url)),
     },
     extensions: [
       '.js',

package/template/typescript/default/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@mdi/font": "7.4.47",
-    "roboto-fontface": "*",
+    "@fontsource/roboto": "5.2.5",
     "vue": "^3.5.13",
     "vuetify": "^3.8.1"
   },

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

@@ -13,6 +13,9 @@ import App from './App.vue'
 // Composables
 import { createApp } from 'vue'
 
+// Styles
+import 'unfonts.css'
+
 const app = createApp(App)
 
 registerPlugins(app)

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

@@ -2,7 +2,7 @@
 import Components from 'unplugin-vue-components/vite'
 import Vue from '@vitejs/plugin-vue'
 import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
-import ViteFonts from 'unplugin-fonts/vite'
+import Fonts from 'unplugin-fonts/vite'
 
 // Utilities
 import { defineConfig } from 'vite'
@@ -17,12 +17,15 @@ export default defineConfig({
     // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
     Vuetify(),
     Components(),
-    ViteFonts({
-      google: {
-        families: [{
-          name: 'Roboto',
-          styles: 'wght@100;300;400;500;700;900',
-        }],
+    Fonts({
+      fontsource: {
+        families: [
+          {
+            name: 'Roboto',
+            weights: [100, 300, 400, 500, 700, 900],
+            styles: ['normal', 'italic'],
+          },
+        ],
       },
     }),
   ],
@@ -32,7 +35,7 @@ export default defineConfig({
   define: { 'process.env': {} },
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@': fileURLToPath(new URL('src', import.meta.url)),
     },
     extensions: [
       '.js',

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

@@ -17,12 +17,12 @@ const router = createRouter({
 // Workaround for https://github.com/vitejs/vite/issues/11804
 router.onError((err, to) => {
   if (err?.message?.includes?.('Failed to fetch dynamically imported module')) {
-    if (!localStorage.getItem('vuetify:dynamic-reload')) {
+    if (localStorage.getItem('vuetify:dynamic-reload')) {
+      console.error('Dynamic import error, reloading page did not fix it', err)
+    } else {
       console.log('Reloading page to fix dynamic import error')
       localStorage.setItem('vuetify:dynamic-reload', 'true')
       location.assign(to.fullPath)
-    } else {
-      console.error('Dynamic import error, reloading page did not fix it', err)
     }
   } else {
     console.error(err)

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

@@ -24,7 +24,7 @@ export default defineConfig({
         'vue',
         VueRouterAutoImports,
         {
-          'pinia': ['defineStore', 'storeToRefs'],
+          pinia: ['defineStore', 'storeToRefs'],
         },
       ],
       dts: 'src/auto-imports.d.ts',
@@ -47,11 +47,14 @@ export default defineConfig({
       },
     }),
     Fonts({
-      google: {
-        families: [{
-          name: 'Roboto',
-          styles: 'wght@100;300;400;500;700;900',
-        }],
+      fontsource: {
+        families: [
+          {
+            name: 'Roboto',
+            weights: [100, 300, 400, 500, 700, 900],
+            styles: ['normal', 'italic'],
+          },
+        ],
       },
     }),
   ],
@@ -67,7 +70,7 @@ export default defineConfig({
   define: { 'process.env': {} },
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@': fileURLToPath(new URL('src', import.meta.url)),
     },
     extensions: [
       '.js',

package/template/typescript/nuxt/modules/vuetify.ts

@@ -7,8 +7,6 @@ import { pathToFileURL } from 'node:url'
 import fs from 'node:fs'
 import fsp from 'node:fs/promises'
 
-export type { ModuleOptions }
-
 // WARNING: Remove the file from modules directory if you install vuetify-nuxt-module
 export default defineNuxtModule<ModuleOptions>({
   meta: {
@@ -51,31 +49,26 @@ export default defineNuxtModule<ModuleOptions>({
         async configResolved (config) {
           if (isObject(options.styles)) {
             sassVariables = true
-            if (path.isAbsolute(options.styles.configFile)) {
-              configFile = path.resolve(options.styles.configFile)
-            } else {
-              configFile = path.resolve(path.join(config.root || process.cwd(), options.styles.configFile))
-            }
+            configFile = path.isAbsolute(options.styles.configFile) ? path.resolve(options.styles.configFile) : path.resolve(path.join(config.root || process.cwd(), options.styles.configFile))
             configFile = pathToFileURL(configFile).href
-          }
-          else {
+          } else {
             isNone = options.styles === 'none'
           }
         },
         async resolveId (source, importer, { custom, ssr }) {
           if (source.startsWith(PREFIX) || source.startsWith(SSR_PREFIX)) {
-            if (source.match(/\.s[ca]ss$/)) {
+            if (/\.s[ca]ss$/.test(source)) {
               return source
             }
 
             const idx = source.indexOf('?')
-            return idx > -1 ? source.slice(0, idx) : source
+            return idx === -1 ? source : source.slice(0, idx)
           }
           if (
             source === 'vuetify/styles' || (
-              importer &&
-              source.endsWith('.css') &&
-              isSubdir(vuetifyBase, path.isAbsolute(source) ? source : importer)
+              importer
+              && source.endsWith('.css')
+              && isSubdir(vuetifyBase, path.isAbsolute(source) ? source : importer)
             )
           ) {
             if (options.styles === 'sass') {
@@ -84,8 +77,9 @@ export default defineNuxtModule<ModuleOptions>({
 
             const resolution = await this.resolve(source, importer, { skipSelf: true, custom })
 
-            if (!resolution)
+            if (!resolution) {
               return undefined
+            }
 
             const target = await resolveCss(resolution.id)
             if (isNone) {
@@ -93,21 +87,21 @@ export default defineNuxtModule<ModuleOptions>({
               return target
             }
 
-            return `${ssr ? SSR_PREFIX: PREFIX}${path.relative(vuetifyBase, target)}`
+            return `${ssr ? SSR_PREFIX : PREFIX}${path.relative(vuetifyBase, target)}`
           }
 
           return undefined
         },
-        load (id){
+        load (id) {
           if (sassVariables) {
             const target = id.startsWith(PREFIX)
               ? path.resolve(vuetifyBase, id.slice(PREFIX.length))
-              : id.startsWith(SSR_PREFIX)
-                ? path.resolve(vuetifyBase, id.slice(SSR_PREFIX.length))
-                : undefined
+              : (id.startsWith(SSR_PREFIX)
+                  ? path.resolve(vuetifyBase, id.slice(SSR_PREFIX.length))
+                  : undefined)
 
             if (target) {
-              const suffix = target.match(/\.scss/) ? ';\n' : '\n'
+              const suffix = /\.scss/.test(target) ? ';\n' : '\n'
               return {
                 code: `@use "${configFile}"${suffix}@use "${pathToFileURL(target).href}"${suffix}`,
                 map: {
@@ -132,10 +126,10 @@ function resolveCssFactory () {
       try {
         mapping = source.replace(/\.css$/, '.sass')
         await fsp.access(mapping, fs.constants.R_OK)
-      }
-      catch (err) {
-        if (!(err instanceof Error && 'code' in err && err.code === 'ENOENT'))
-          throw err
+      } catch (error) {
+        if (!(error instanceof Error && 'code' in error && error.code === 'ENOENT')) {
+          throw error
+        }
         mapping = source.replace(/\.css$/, '.scss')
       }
       mappings.set(source, mapping)
@@ -148,3 +142,5 @@ function isSubdir (root: string, test: string) {
   const relative = path.relative(root, test)
   return relative && !relative.startsWith('..') && !path.isAbsolute(relative)
 }
+
+export { type Options as ModuleOptions } from '@vuetify/loader-shared'

package/template/typescript/nuxt/plugins/vuetify.ts

@@ -10,5 +10,5 @@ export default defineNuxtPlugin(nuxtApp => {
     },
   })
 
-  nuxtApp.vueApp.use(vuetify);
+  nuxtApp.vueApp.use(vuetify)
 })