create-vuetify 2.7.3 → 2.8.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
 // src/index.ts
 import { dirname as dirname3, join as join4, resolve as resolve6 } from "node:path";
 import { fileURLToPath } from "node:url";
-import { mkdirSync as mkdirSync2, rmSync, writeFileSync as writeFileSync2, existsSync as existsSync5 } from "node:fs";
+import { mkdirSync as mkdirSync2, rmSync, writeFileSync as writeFileSync2, existsSync as existsSync5, readFileSync as readFileSync2 } from "node:fs";
 
 // src/utils/prompts.ts
 import { join as join2, resolve as resolve3 } from "node:path";
@@ -774,14 +774,14 @@ async function executeCommand(command, args, options = {}) {
 var NO_PACKAGE_MANAGER_DETECTED_ERROR_MSG = "No package manager auto-detected.";
 async function resolveOperationOptions(options = {}) {
   const cwd2 = options.cwd || process.cwd();
-  const env = { ...process.env, ...options.env };
+  const env2 = { ...process.env, ...options.env };
   const packageManager2 = (typeof options.packageManager === "string" ? packageManagers.find((pm) => pm.name === options.packageManager) : options.packageManager) || await detectPackageManager(options.cwd || process.cwd());
   if (!packageManager2) {
     throw new Error(NO_PACKAGE_MANAGER_DETECTED_ERROR_MSG);
   }
   return {
     cwd: cwd2,
-    env,
+    env: env2,
     silent: options.silent ?? false,
     packageManager: packageManager2,
     dev: options.dev ?? false,
@@ -1053,6 +1053,16 @@ async function initPrompts(context) {
         { title: "Nuxt Recommended (Everything from Default. Enables auto importing & layouts)", value: "nuxt-essentials" }
       ]
     },
+    {
+      name: "vuetifyVersion",
+      type: context.vuetifyVersion ? null : "select",
+      message: "Which Vuetify version would you like to use?",
+      initial: 0,
+      choices: [
+        { title: "Vuetify 3 (Stable)", value: "3.x" },
+        { title: "Vuetify 4 (Beta)", value: "4.x" }
+      ]
+    },
     {
       name: "useTypeScript",
       type: (usePreset) => {
@@ -1175,6 +1185,7 @@ function resolveNonInteractiveContext(context) {
   const useNuxtModule = context.useNuxtModule;
   const useNuxtSSR = context.useNuxtSSR;
   const useNuxtSSRClientHints = context.useNuxtSSRClientHints;
+  const vuetifyVersion = context.vuetifyVersion;
   return {
     cwd: context.cwd,
     projectName,
@@ -1185,14 +1196,15 @@ function resolveNonInteractiveContext(context) {
     usePreset,
     useNuxtModule: useNuxtModule || false,
     useNuxtSSR: useNuxtSSR || false,
-    useNuxtSSRClientHints: useNuxtSSRClientHints || false
+    useNuxtSSRClientHints: useNuxtSSRClientHints || false,
+    vuetifyVersion: vuetifyVersion || "3.x"
   };
 }
 
 // package.json
 var package_default = {
   name: "create-vuetify",
-  version: "2.7.3",
+  version: "2.8.0",
   author: "Elijah Kotyluk <elijah@elijahkotyluk.com>",
   license: "MIT",
   type: "module",
@@ -1241,10 +1253,11 @@ var package_default = {
     release: "bumpp"
   },
   dependencies: {
+    consola: "^3.4.2",
     kolorist: "^1.8.0",
     magicast: "^0.3.5",
     minimist: "^1.2.8",
-    "package-manager-detector": "^1.3.0",
+    "package-manager-detector": "^1.6.0",
     prompts: "^2.4.2",
     tinyexec: "^1.0.1",
     "validate-npm-package-name": "^6.0.2"
@@ -1261,7 +1274,7 @@ var package_default = {
     nypm: "^0.6.2",
     typescript: "^5.9.2"
   },
-  packageManager: "pnpm@9.15.9"
+  packageManager: "pnpm@10.26.1"
 };
 
 // src/utils/cli/helpText.ts
@@ -1278,6 +1291,7 @@ Options:
   --nuxt-module                      Use vuetify-nuxt-module (for Nuxt presets)
   --nuxt-ssr, --ssr                  Enable Nuxt SSR (for Nuxt presets)
   --nuxt-ssr-client-hints            Enable Nuxt SSR Client Hints (for Nuxt presets)
+  --v4                               Use Vuetify 4 (Beta)
   -h, --help                         Show help
   -v, --version                      Show version
 
@@ -1305,7 +1319,7 @@ import minimist from "minimist";
 var validPresets = ["base", "default", "essentials", "nuxt-base", "nuxt-default", "nuxt-essentials"];
 var validPackageManagers = ["npm", "pnpm", "yarn", "bun", "none"];
 function parseCliArgs(args) {
-  const argv = minimist(args, {
+  const argv2 = minimist(args, {
     alias: {
       typescript: ["ts"],
       preset: ["p"],
@@ -1315,6 +1329,7 @@ function parseCliArgs(args) {
       nuxtModule: ["nuxt-module"],
       nuxtSSR: ["nuxt-ssr", "ssr"],
       nuxtSSRClientHints: ["nuxt-ssr-client-hints", "client-hints"],
+      v4: [],
       help: ["h"],
       version: ["v"]
     },
@@ -1325,6 +1340,7 @@ function parseCliArgs(args) {
       "nuxtModule",
       "nuxtSSR",
       "nuxtSSRClientHints",
+      "v4",
       "help",
       "version"
     ],
@@ -1333,25 +1349,26 @@ function parseCliArgs(args) {
       "packageManager"
     ]
   });
-  if (argv.preset && !validPresets.includes(argv.preset)) {
-    throw new Error(`'${argv.preset}' is not a valid preset. Valid presets are: ${validPresets.join(", ")}.`);
+  if (argv2.preset && !validPresets.includes(argv2.preset)) {
+    throw new Error(`'${argv2.preset}' is not a valid preset. Valid presets are: ${validPresets.join(", ")}.`);
   }
-  if (argv.packageManager && !validPackageManagers.includes(argv.packageManager)) {
-    throw new Error(`'${argv.packageManager}' is not a valid package manager. Valid options are: ${validPackageManagers.join(", ")}.`);
+  if (argv2.packageManager && !validPackageManagers.includes(argv2.packageManager)) {
+    throw new Error(`'${argv2.packageManager}' is not a valid package manager. Valid options are: ${validPackageManagers.join(", ")}.`);
   }
-  const projectName = argv._[0];
+  const projectName = argv2._[0];
   return {
     projectName,
-    preset: argv.preset,
-    typescript: argv.typescript,
-    packageManager: argv.packageManager,
-    installDependencies: argv.installDependencies,
-    overwrite: argv.overwrite,
-    nuxtModule: argv.nuxtModule,
-    nuxtSSR: argv.nuxtSSR,
-    nuxtSSRClientHints: argv.nuxtSSRClientHints,
-    help: argv.help,
-    version: argv.version
+    preset: argv2.preset,
+    typescript: argv2.typescript,
+    packageManager: argv2.packageManager,
+    installDependencies: argv2.installDependencies,
+    overwrite: argv2.overwrite,
+    nuxtModule: argv2.nuxtModule,
+    nuxtSSR: argv2.nuxtSSR,
+    nuxtSSRClientHints: argv2.nuxtSSRClientHints,
+    v4: argv2.v4,
+    help: argv2.help,
+    version: argv2.version
   };
 }
 function cliOptionsToContext(cliOptions, cwd2) {
@@ -1365,7 +1382,8 @@ function cliOptionsToContext(cliOptions, cwd2) {
     canOverwrite: cliOptions.overwrite ?? false,
     useNuxtModule: cliOptions.nuxtModule ?? true,
     useNuxtSSR: cliOptions.nuxtSSR ?? true,
-    useNuxtSSRClientHints: cliOptions.nuxtSSRClientHints ?? (cliOptions.nuxtModule && cliOptions.nuxtSSR)
+    useNuxtSSRClientHints: cliOptions.nuxtSSRClientHints ?? (cliOptions.nuxtModule && cliOptions.nuxtSSR),
+    vuetifyVersion: cliOptions.v4 ? "4.x" : void 0
   };
 }
 
@@ -1374,90 +1392,8 @@ import { red as red3 } from "kolorist";
 
 // src/utils/banner.ts
 import { blue } from "kolorist";
-function supportsColor() {
-  const testText = "test";
-  const coloredText = blue(testText);
-  return coloredText !== testText;
-}
-function createBanner() {
-  if (!supportsColor()) {
-    return createPlainBanner();
-  }
-  return "\x1B[38;2;22;151;246mV\x1B[39m\x1B[38;2;22;147;242mu\x1B[39m\x1B[38;2;22;144;238me\x1B[39m\x1B[38;2;22;140;234mt\x1B[39m\x1B[38;2;23;136;229mi\x1B[39m\x1B[38;2;23;133;225mf\x1B[39m\x1B[38;2;23;129;221my\x1B[39m\x1B[38;2;23;125;217m.\x1B[39m\x1B[38;2;23;121;213mj\x1B[39m\x1B[38;2;23;118;209ms\x1B[39m \x1B[38;2;24;114;204m-\x1B[39m \x1B[38;2;24;110;200mM\x1B[39m\x1B[38;2;24;107;196ma\x1B[39m\x1B[38;2;24;103;192mt\x1B[39m\x1B[38;2;32;110;197me\x1B[39m\x1B[38;2;39;118;202mr\x1B[39m\x1B[38;2;47;125;207mi\x1B[39m\x1B[38;2;54;132;211ma\x1B[39m\x1B[38;2;62;140;216ml\x1B[39m \x1B[38;2;70;147;221mC\x1B[39m\x1B[38;2;77;154;226mo\x1B[39m\x1B[38;2;85;161;231mm\x1B[39m\x1B[38;2;93;169;236mp\x1B[39m\x1B[38;2;100;176;240mo\x1B[39m\x1B[38;2;108;183;245mn\x1B[39m\x1B[38;2;115;191;250me\x1B[39m\x1B[38;2;123;198;255mn\x1B[39m\x1B[38;2;126;199;255mt\x1B[39m \x1B[38;2;129;201;255mF\x1B[39m\x1B[38;2;133;202;255mr\x1B[39m\x1B[38;2;136;204;255ma\x1B[39m\x1B[38;2;139;205;255mm\x1B[39m\x1B[38;2;142;207;255me\x1B[39m\x1B[38;2;145;208;255mw\x1B[39m\x1B[38;2;149;210;255mo\x1B[39m\x1B[38;2;152;211;255mr\x1B[39m\x1B[38;2;155;212;255mk\x1B[39m \x1B[38;2;158;214;255mf\x1B[39m\x1B[38;2;161;215;255mo\x1B[39m\x1B[38;2;164;217;255mr\x1B[39m \x1B[38;2;168;218;255mV\x1B[39m\x1B[38;2;171;220;255mu\x1B[39m\x1B[38;2;174;221;255me\x1B[39m";
-}
-function createPlainBanner() {
-  return "Vuetify - Vue Component Framework";
-}
 
-// src/utils/deepMerge.ts
-var isObject = (v) => {
-  return v === Object(v) && v !== null && !Array.isArray(v);
-};
-var deepMerge = (...sources) => sources.reduce((acc, curr) => {
-  for (const key of Object.keys(curr)) {
-    if (Array.isArray(acc[key]) && Array.isArray(curr[key])) {
-      acc[key] = Array.from(new Set(acc[key].concat(curr[key])));
-    } else if (isObject(acc[key]) && isObject(curr[key])) {
-      acc[key] = deepMerge(acc[key], curr[key]);
-    } else {
-      acc[key] = curr[key];
-    }
-  }
-  return acc;
-}, {});
-
-// src/utils/renderTemplate.ts
-import { copyFileSync, mkdirSync, readdirSync as readdirSync3, readFileSync, statSync, writeFileSync, existsSync as existsSync4 } from "node:fs";
-import { basename as basename2, dirname as dirname2, resolve as resolve5 } from "node:path";
-function mergePkg(source, destination) {
-  const target = existsSync4(destination) ? JSON.parse(readFileSync(destination, "utf8")) : {};
-  const src = JSON.parse(readFileSync(source, "utf8"));
-  const mergedPkg = deepMerge(target, src);
-  const keysToSort = ["devDependencies", "dependencies"];
-  for (const k of keysToSort) {
-    if (mergedPkg[k]) {
-      mergedPkg[k] = Object.keys(mergedPkg[k]).toSorted().reduce((a, c) => (a[c] = mergedPkg[k][c], a), {});
-    }
-  }
-  writeFileSync(destination, JSON.stringify(mergedPkg, null, 2) + "\n");
-}
-function renderDirectory(source, destination) {
-  mkdirSync(destination, { recursive: true });
-  for (const path4 of readdirSync3(source)) {
-    renderTemplate(resolve5(source, path4), resolve5(destination, path4));
-  }
-}
-function renderFile(source, destination) {
-  const filename = basename2(source);
-  if (filename.startsWith("_")) {
-    destination = resolve5(dirname2(destination), filename.replace("_", "."));
-  }
-  if (filename === "package.json") {
-    mergePkg(source, destination);
-  } else {
-    copyFileSync(source, destination);
-  }
-}
-function renderTemplate(source, destination) {
-  if (statSync(source).isDirectory()) {
-    renderDirectory(source, destination);
-  } else {
-    renderFile(source, destination);
-  }
-}
-
-// src/utils/nuxt/renderNuxtTemplate.ts
-import fs3 from "node:fs";
-import path3 from "node:path";
-import { spawnSync as spawnSync2 } from "node:child_process";
-
-// src/utils/nuxt/utils.ts
-import process2 from "node:process";
-import path from "node:path";
-import { spawnSync } from "node:child_process";
-import fs from "node:fs";
-
-// node_modules/.pnpm/package-manager-detector@1.3.0/node_modules/package-manager-detector/dist/commands.mjs
+// node_modules/.pnpm/package-manager-detector@1.6.0/node_modules/package-manager-detector/dist/commands.mjs
 function dashDashArg(agent, agentCommand) {
   return (args) => {
     if (args.length > 1) {
@@ -1481,6 +1417,7 @@ var npm = {
   "add": ["npm", "i", 0],
   "upgrade": ["npm", "update", 0],
   "upgrade-interactive": null,
+  "dedupe": ["npm", "dedupe", 0],
   "execute": ["npx", 0],
   "execute-local": ["npx", 0],
   "uninstall": ["npm", "uninstall", 0],
@@ -1495,6 +1432,7 @@ var yarn2 = {
   "add": ["yarn", "add", 0],
   "upgrade": ["yarn", "upgrade", 0],
   "upgrade-interactive": ["yarn", "upgrade-interactive", 0],
+  "dedupe": null,
   "execute": ["npx", 0],
   "execute-local": dashDashArg("yarn", "exec"),
   "uninstall": ["yarn", "remove", 0],
@@ -1505,6 +1443,7 @@ var yarnBerry = {
   "frozen": ["yarn", "install", "--immutable", 0],
   "upgrade": ["yarn", "up", 0],
   "upgrade-interactive": ["yarn", "up", "-i", 0],
+  "dedupe": ["yarn", "dedupe", 0],
   "execute": ["yarn", "dlx", 0],
   "execute-local": ["yarn", "exec", 0],
   // Yarn 2+ removed 'global', see https://github.com/yarnpkg/berry/issues/821
@@ -1520,6 +1459,7 @@ var pnpm2 = {
   "add": ["pnpm", "add", 0],
   "upgrade": ["pnpm", "update", 0],
   "upgrade-interactive": ["pnpm", "update", "-i", 0],
+  "dedupe": ["pnpm", "dedupe", 0],
   "execute": ["pnpm", "dlx", 0],
   "execute-local": ["pnpm", "exec", 0],
   "uninstall": ["pnpm", "remove", 0],
@@ -1533,7 +1473,8 @@ var bun = {
   "global": ["bun", "add", "-g", 0],
   "add": ["bun", "add", 0],
   "upgrade": ["bun", "update", 0],
-  "upgrade-interactive": ["bun", "update", 0],
+  "upgrade-interactive": ["bun", "update", "-i", 0],
+  "dedupe": null,
   "execute": ["bun", "x", 0],
   "execute-local": ["bun", "x", 0],
   "uninstall": ["bun", "remove", 0],
@@ -1548,6 +1489,7 @@ var deno = {
   "add": ["deno", "add", 0],
   "upgrade": ["deno", "outdated", "--update", 0],
   "upgrade-interactive": ["deno", "outdated", "--update", 0],
+  "dedupe": null,
   "execute": denoExecute(),
   "execute-local": ["deno", "task", "--eval", 0],
   "uninstall": ["deno", "remove", 0],
@@ -1584,80 +1526,7 @@ function constructCommand(value, args) {
   };
 }
 
-// src/utils/nuxt/utils.ts
-function detectPkgInfo() {
-  const userAgent2 = process2.env.npm_config_user_agent;
-  if (!userAgent2) {
-    return void 0;
-  }
-  const pkgSpec = userAgent2.split(" ")[0];
-  const pkgSpecArr = pkgSpec.split("/");
-  return {
-    name: pkgSpecArr[0],
-    version: pkgSpecArr[1]
-  };
-}
-function addPackageObject(key, entry, pkg, sort = true) {
-  pkg[key] ??= {};
-  if (!sort) {
-    for (const [name, value] of entry) {
-      pkg[key][name] = value;
-    }
-    return;
-  }
-  const entries = Object.entries(pkg[key]);
-  pkg[key] = {};
-  for (const [name, value] of entry) {
-    entries.push([name, value]);
-  }
-  for (const [k, v] of entries.toSorted(([a], [b]) => a.localeCompare(b))) {
-    pkg[key][k] = v;
-  }
-}
-function runCommand(pmDetection, command, args, cwd2) {
-  let runCommand2 = "npm";
-  let runArgs = [command];
-  if (pmDetection) {
-    const prepare = resolveCommand(pmDetection.name, command, args);
-    runCommand2 = prepare.command;
-    runArgs = prepare.args;
-  }
-  const run2 = spawnSync(
-    runCommand2,
-    runArgs.filter(Boolean),
-    {
-      cwd: cwd2,
-      stdio: ["inherit", "inherit", "pipe"],
-      shell: true
-    }
-  );
-  if (run2.error) {
-    throw run2.error;
-  }
-}
-function editFile(file, callback, destination) {
-  const content = fs.readFileSync(file, "utf8");
-  fs.writeFileSync(destination ?? file, callback(content), "utf8");
-}
-function getPaths(rootPath, templateDir) {
-  return [path.join(rootPath, "app"), templateDir];
-}
-
-// src/utils/nuxt/versions.ts
-var versions = {
-  "vuetify": "^3.9.1",
-  "typescript": "^5.8.3",
-  "vue-tsc": "^3.0.1",
-  "sass-embedded": "^1.89.2",
-  "@vuetify/loader-shared": "^2.1.0",
-  "vite-plugin-vuetify": "^2.1.1",
-  "vuetify-nuxt-module": "^0.18.7",
-  "upath": "^2.0.1",
-  "@mdi/font": "^7.4.47",
-  "@nuxt/fonts": "^0.11.4"
-};
-
-// node_modules/.pnpm/package-manager-detector@1.3.0/node_modules/package-manager-detector/dist/constants.mjs
+// node_modules/.pnpm/package-manager-detector@1.6.0/node_modules/package-manager-detector/dist/constants.mjs
 var AGENTS = [
   "npm",
   "yarn",
@@ -1693,38 +1562,47 @@ var INSTALL_METADATA = {
   "bun.lockb": "bun"
 };
 
-// node_modules/.pnpm/package-manager-detector@1.3.0/node_modules/package-manager-detector/dist/detect.mjs
-import fs2 from "node:fs/promises";
-import path2 from "node:path";
-import process3 from "node:process";
+// node_modules/.pnpm/package-manager-detector@1.6.0/node_modules/package-manager-detector/dist/detect.mjs
+import fs from "node:fs/promises";
+import path from "node:path";
+import process2 from "node:process";
 async function pathExists(path22, type) {
   try {
-    const stat = await fs2.stat(path22);
+    const stat = await fs.stat(path22);
     return type === "file" ? stat.isFile() : stat.isDirectory();
   } catch {
     return false;
   }
 }
-function* lookup(cwd2 = process3.cwd()) {
-  let directory = path2.resolve(cwd2);
-  const { root } = path2.parse(directory);
+function getUserAgent() {
+  const userAgent2 = process2.env.npm_config_user_agent;
+  if (!userAgent2) {
+    return null;
+  }
+  const name = userAgent2.split("/")[0];
+  return AGENTS.includes(name) ? name : null;
+}
+function* lookup(cwd2 = process2.cwd()) {
+  let directory = path.resolve(cwd2);
+  const { root } = path.parse(directory);
   while (directory && directory !== root) {
     yield directory;
-    directory = path2.dirname(directory);
+    directory = path.dirname(directory);
   }
 }
-async function parsePackageJson(filepath, onUnknown) {
-  return !filepath || !pathExists(filepath, "file") ? null : await handlePackageManager(filepath, onUnknown);
+async function parsePackageJson(filepath, options) {
+  if (!filepath || !await pathExists(filepath, "file"))
+    return null;
+  return await handlePackageManager(filepath, options);
 }
 async function detect(options = {}) {
   const {
     cwd: cwd2,
-    strategies = ["lockfile", "packageManager-field", "devEngines-field"],
-    onUnknown
+    strategies = ["lockfile", "packageManager-field", "devEngines-field"]
   } = options;
   let stopDir;
   if (typeof options.stopDir === "string") {
-    const resolved = path2.resolve(options.stopDir);
+    const resolved = path.resolve(options.stopDir);
     stopDir = (dir) => dir === resolved;
   } else {
     stopDir = options.stopDir;
@@ -1734,9 +1612,9 @@ async function detect(options = {}) {
       switch (strategy) {
         case "lockfile": {
           for (const lock of Object.keys(LOCKS)) {
-            if (await pathExists(path2.join(directory, lock), "file")) {
+            if (await pathExists(path.join(directory, lock), "file")) {
               const name = LOCKS[lock];
-              const result = await parsePackageJson(path2.join(directory, "package.json"), onUnknown);
+              const result = await parsePackageJson(path.join(directory, "package.json"), options);
               if (result)
                 return result;
               else
@@ -1747,7 +1625,7 @@ async function detect(options = {}) {
         }
         case "packageManager-field":
         case "devEngines-field": {
-          const result = await parsePackageJson(path2.join(directory, "package.json"), onUnknown);
+          const result = await parsePackageJson(path.join(directory, "package.json"), options);
           if (result)
             return result;
           break;
@@ -1755,7 +1633,7 @@ async function detect(options = {}) {
         case "install-metadata": {
           for (const metadata of Object.keys(INSTALL_METADATA)) {
             const fileOrDir = metadata.endsWith("/") ? "dir" : "file";
-            if (await pathExists(path2.join(directory, metadata), fileOrDir)) {
+            if (await pathExists(path.join(directory, metadata), fileOrDir)) {
               const name = INSTALL_METADATA[metadata];
               const agent = name === "yarn" ? isMetadataYarnClassic(metadata) ? "yarn" : "yarn@berry" : name;
               return { name, agent };
@@ -1784,9 +1662,10 @@ function getNameAndVer(pkg) {
   }
   return void 0;
 }
-async function handlePackageManager(filepath, onUnknown) {
+async function handlePackageManager(filepath, options) {
   try {
-    const pkg = JSON.parse(await fs2.readFile(filepath, "utf8"));
+    const content = await fs.readFile(filepath, "utf8");
+    const pkg = options.packageJsonParser ? await options.packageJsonParser(content, filepath) : JSON.parse(content);
     let agent;
     const nameAndVer = getNameAndVer(pkg);
     if (nameAndVer) {
@@ -1804,7 +1683,7 @@ async function handlePackageManager(filepath, onUnknown) {
         agent = name;
         return { name, agent, version };
       } else {
-        return onUnknown?.(pkg.packageManager) ?? null;
+        return options.onUnknown?.(pkg.packageManager) ?? null;
       }
     }
   } catch {
@@ -1815,6 +1694,414 @@ function isMetadataYarnClassic(metadataPath) {
   return metadataPath.endsWith(".yarn_integrity");
 }
 
+// node_modules/.pnpm/consola@3.4.2/node_modules/consola/dist/shared/consola.DXBYu-KD.mjs
+import * as tty from "node:tty";
+var {
+  env = {},
+  argv = [],
+  platform = ""
+} = typeof process === "undefined" ? {} : process;
+var isDisabled = "NO_COLOR" in env || argv.includes("--no-color");
+var isForced = "FORCE_COLOR" in env || argv.includes("--color");
+var isWindows = platform === "win32";
+var isDumbTerminal = env.TERM === "dumb";
+var isCompatibleTerminal = tty && tty.isatty && tty.isatty(1) && env.TERM && !isDumbTerminal;
+var isCI = "CI" in env && ("GITHUB_ACTIONS" in env || "GITLAB_CI" in env || "CIRCLECI" in env);
+var isColorSupported = !isDisabled && (isForced || isWindows && !isDumbTerminal || isCompatibleTerminal || isCI);
+function replaceClose(index, string, close, replace, head = string.slice(0, Math.max(0, index)) + replace, tail = string.slice(Math.max(0, index + close.length)), next = tail.indexOf(close)) {
+  return head + (next < 0 ? tail : replaceClose(next, tail, close, replace));
+}
+function clearBleed(index, string, open, close, replace) {
+  return index < 0 ? open + string + close : open + replaceClose(index, string, close, replace) + close;
+}
+function filterEmpty(open, close, replace = open, at = open.length + 1) {
+  return (string) => string || !(string === "" || string === void 0) ? clearBleed(
+    ("" + string).indexOf(close, at),
+    string,
+    open,
+    close,
+    replace
+  ) : "";
+}
+function init(open, close, replace) {
+  return filterEmpty(`\x1B[${open}m`, `\x1B[${close}m`, replace);
+}
+var colorDefs = {
+  reset: init(0, 0),
+  bold: init(1, 22, "\x1B[22m\x1B[1m"),
+  dim: init(2, 22, "\x1B[22m\x1B[2m"),
+  italic: init(3, 23),
+  underline: init(4, 24),
+  inverse: init(7, 27),
+  hidden: init(8, 28),
+  strikethrough: init(9, 29),
+  black: init(30, 39),
+  red: init(31, 39),
+  green: init(32, 39),
+  yellow: init(33, 39),
+  blue: init(34, 39),
+  magenta: init(35, 39),
+  cyan: init(36, 39),
+  white: init(37, 39),
+  gray: init(90, 39),
+  bgBlack: init(40, 49),
+  bgRed: init(41, 49),
+  bgGreen: init(42, 49),
+  bgYellow: init(43, 49),
+  bgBlue: init(44, 49),
+  bgMagenta: init(45, 49),
+  bgCyan: init(46, 49),
+  bgWhite: init(47, 49),
+  blackBright: init(90, 39),
+  redBright: init(91, 39),
+  greenBright: init(92, 39),
+  yellowBright: init(93, 39),
+  blueBright: init(94, 39),
+  magentaBright: init(95, 39),
+  cyanBright: init(96, 39),
+  whiteBright: init(97, 39),
+  bgBlackBright: init(100, 49),
+  bgRedBright: init(101, 49),
+  bgGreenBright: init(102, 49),
+  bgYellowBright: init(103, 49),
+  bgBlueBright: init(104, 49),
+  bgMagentaBright: init(105, 49),
+  bgCyanBright: init(106, 49),
+  bgWhiteBright: init(107, 49)
+};
+function createColors(useColor = isColorSupported) {
+  return useColor ? colorDefs : Object.fromEntries(Object.keys(colorDefs).map((key) => [key, String]));
+}
+var colors = createColors();
+function getColor(color, fallback = "reset") {
+  return colors[color] || colors[fallback];
+}
+var ansiRegex = [
+  String.raw`[\u001B\u009B][[\]()#;?]*(?:(?:(?:(?:;[-a-zA-Z\d\/#&.:=?%@~_]+)*|[a-zA-Z\d]+(?:;[-a-zA-Z\d\/#&.:=?%@~_]*)*)?\u0007)`,
+  String.raw`(?:(?:\d{1,4}(?:;\d{0,4})*)?[\dA-PR-TZcf-nq-uy=><~]))`
+].join("|");
+function stripAnsi(text) {
+  return text.replace(new RegExp(ansiRegex, "g"), "");
+}
+var boxStylePresets = {
+  solid: {
+    tl: "\u250C",
+    tr: "\u2510",
+    bl: "\u2514",
+    br: "\u2518",
+    h: "\u2500",
+    v: "\u2502"
+  },
+  double: {
+    tl: "\u2554",
+    tr: "\u2557",
+    bl: "\u255A",
+    br: "\u255D",
+    h: "\u2550",
+    v: "\u2551"
+  },
+  doubleSingle: {
+    tl: "\u2553",
+    tr: "\u2556",
+    bl: "\u2559",
+    br: "\u255C",
+    h: "\u2500",
+    v: "\u2551"
+  },
+  doubleSingleRounded: {
+    tl: "\u256D",
+    tr: "\u256E",
+    bl: "\u2570",
+    br: "\u256F",
+    h: "\u2500",
+    v: "\u2551"
+  },
+  singleThick: {
+    tl: "\u250F",
+    tr: "\u2513",
+    bl: "\u2517",
+    br: "\u251B",
+    h: "\u2501",
+    v: "\u2503"
+  },
+  singleDouble: {
+    tl: "\u2552",
+    tr: "\u2555",
+    bl: "\u2558",
+    br: "\u255B",
+    h: "\u2550",
+    v: "\u2502"
+  },
+  singleDoubleRounded: {
+    tl: "\u256D",
+    tr: "\u256E",
+    bl: "\u2570",
+    br: "\u256F",
+    h: "\u2550",
+    v: "\u2502"
+  },
+  rounded: {
+    tl: "\u256D",
+    tr: "\u256E",
+    bl: "\u2570",
+    br: "\u256F",
+    h: "\u2500",
+    v: "\u2502"
+  }
+};
+var defaultStyle = {
+  borderColor: "white",
+  borderStyle: "rounded",
+  valign: "center",
+  padding: 2,
+  marginLeft: 1,
+  marginTop: 1,
+  marginBottom: 1
+};
+function box(text, _opts = {}) {
+  const opts = {
+    ..._opts,
+    style: {
+      ...defaultStyle,
+      ..._opts.style
+    }
+  };
+  const textLines = text.split("\n");
+  const boxLines = [];
+  const _color = getColor(opts.style.borderColor);
+  const borderStyle = {
+    ...typeof opts.style.borderStyle === "string" ? boxStylePresets[opts.style.borderStyle] || boxStylePresets.solid : opts.style.borderStyle
+  };
+  if (_color) {
+    for (const key in borderStyle) {
+      borderStyle[key] = _color(
+        borderStyle[key]
+      );
+    }
+  }
+  const paddingOffset = opts.style.padding % 2 === 0 ? opts.style.padding : opts.style.padding + 1;
+  const height = textLines.length + paddingOffset;
+  const width = Math.max(
+    ...textLines.map((line) => stripAnsi(line).length),
+    opts.title ? stripAnsi(opts.title).length : 0
+  ) + paddingOffset;
+  const widthOffset = width + paddingOffset;
+  const leftSpace = opts.style.marginLeft > 0 ? " ".repeat(opts.style.marginLeft) : "";
+  if (opts.style.marginTop > 0) {
+    boxLines.push("".repeat(opts.style.marginTop));
+  }
+  if (opts.title) {
+    const title = _color ? _color(opts.title) : opts.title;
+    const left = borderStyle.h.repeat(
+      Math.floor((width - stripAnsi(opts.title).length) / 2)
+    );
+    const right = borderStyle.h.repeat(
+      width - stripAnsi(opts.title).length - stripAnsi(left).length + paddingOffset
+    );
+    boxLines.push(
+      `${leftSpace}${borderStyle.tl}${left}${title}${right}${borderStyle.tr}`
+    );
+  } else {
+    boxLines.push(
+      `${leftSpace}${borderStyle.tl}${borderStyle.h.repeat(widthOffset)}${borderStyle.tr}`
+    );
+  }
+  const valignOffset = opts.style.valign === "center" ? Math.floor((height - textLines.length) / 2) : opts.style.valign === "top" ? height - textLines.length - paddingOffset : height - textLines.length;
+  for (let i = 0; i < height; i++) {
+    if (i < valignOffset || i >= valignOffset + textLines.length) {
+      boxLines.push(
+        `${leftSpace}${borderStyle.v}${" ".repeat(widthOffset)}${borderStyle.v}`
+      );
+    } else {
+      const line = textLines[i - valignOffset];
+      const left = " ".repeat(paddingOffset);
+      const right = " ".repeat(width - stripAnsi(line).length);
+      boxLines.push(
+        `${leftSpace}${borderStyle.v}${left}${line}${right}${borderStyle.v}`
+      );
+    }
+  }
+  boxLines.push(
+    `${leftSpace}${borderStyle.bl}${borderStyle.h.repeat(widthOffset)}${borderStyle.br}`
+  );
+  if (opts.style.marginBottom > 0) {
+    boxLines.push("".repeat(opts.style.marginBottom));
+  }
+  return boxLines.join("\n");
+}
+
+// src/utils/banner.ts
+function supportsColor() {
+  const testText = "test";
+  const coloredText = blue(testText);
+  return coloredText !== testText;
+}
+function createBanner() {
+  if (!supportsColor()) {
+    return createPlainBanner();
+  }
+  return "\x1B[38;2;22;151;246mV\x1B[39m\x1B[38;2;22;147;242mu\x1B[39m\x1B[38;2;22;144;238me\x1B[39m\x1B[38;2;22;140;234mt\x1B[39m\x1B[38;2;23;136;229mi\x1B[39m\x1B[38;2;23;133;225mf\x1B[39m\x1B[38;2;23;129;221my\x1B[39m\x1B[38;2;23;125;217m.\x1B[39m\x1B[38;2;23;121;213mj\x1B[39m\x1B[38;2;23;118;209ms\x1B[39m \x1B[38;2;24;114;204m-\x1B[39m \x1B[38;2;24;110;200mM\x1B[39m\x1B[38;2;24;107;196ma\x1B[39m\x1B[38;2;24;103;192mt\x1B[39m\x1B[38;2;32;110;197me\x1B[39m\x1B[38;2;39;118;202mr\x1B[39m\x1B[38;2;47;125;207mi\x1B[39m\x1B[38;2;54;132;211ma\x1B[39m\x1B[38;2;62;140;216ml\x1B[39m \x1B[38;2;70;147;221mC\x1B[39m\x1B[38;2;77;154;226mo\x1B[39m\x1B[38;2;85;161;231mm\x1B[39m\x1B[38;2;93;169;236mp\x1B[39m\x1B[38;2;100;176;240mo\x1B[39m\x1B[38;2;108;183;245mn\x1B[39m\x1B[38;2;115;191;250me\x1B[39m\x1B[38;2;123;198;255mn\x1B[39m\x1B[38;2;126;199;255mt\x1B[39m \x1B[38;2;129;201;255mF\x1B[39m\x1B[38;2;133;202;255mr\x1B[39m\x1B[38;2;136;204;255ma\x1B[39m\x1B[38;2;139;205;255mm\x1B[39m\x1B[38;2;142;207;255me\x1B[39m\x1B[38;2;145;208;255mw\x1B[39m\x1B[38;2;149;210;255mo\x1B[39m\x1B[38;2;152;211;255mr\x1B[39m\x1B[38;2;155;212;255mk\x1B[39m \x1B[38;2;158;214;255mf\x1B[39m\x1B[38;2;161;215;255mo\x1B[39m\x1B[38;2;164;217;255mr\x1B[39m \x1B[38;2;168;218;255mV\x1B[39m\x1B[38;2;171;220;255mu\x1B[39m\x1B[38;2;174;221;255me\x1B[39m";
+}
+function createPlainBanner() {
+  return "Vuetify - Vue Component Framework";
+}
+function createBetaBanner() {
+  const packageManager2 = getUserAgent();
+  return box(`${packageManager2 ?? "npm"} create vuetify@beta`, { title: "Try new vuetify-create with better customization and presets support!", style: { borderColor: "blueBright" } });
+}
+
+// src/utils/deepMerge.ts
+var isObject = (v) => {
+  return v === Object(v) && v !== null && !Array.isArray(v);
+};
+var deepMerge = (...sources) => sources.reduce((acc, curr) => {
+  for (const key of Object.keys(curr)) {
+    if (Array.isArray(acc[key]) && Array.isArray(curr[key])) {
+      acc[key] = Array.from(new Set(acc[key].concat(curr[key])));
+    } else if (isObject(acc[key]) && isObject(curr[key])) {
+      acc[key] = deepMerge(acc[key], curr[key]);
+    } else {
+      acc[key] = curr[key];
+    }
+  }
+  return acc;
+}, {});
+
+// src/utils/renderTemplate.ts
+import { copyFileSync, mkdirSync, readdirSync as readdirSync3, readFileSync, statSync, writeFileSync, existsSync as existsSync4 } from "node:fs";
+import { basename as basename2, dirname as dirname2, extname as extname2, resolve as resolve5 } from "node:path";
+function mergePkg(source, destination) {
+  const target = existsSync4(destination) ? JSON.parse(readFileSync(destination, "utf8")) : {};
+  const src = JSON.parse(readFileSync(source, "utf8"));
+  const mergedPkg = deepMerge(target, src);
+  const keysToSort = ["devDependencies", "dependencies"];
+  for (const k of keysToSort) {
+    if (mergedPkg[k]) {
+      mergedPkg[k] = Object.keys(mergedPkg[k]).toSorted().reduce((a, c) => (a[c] = mergedPkg[k][c], a), {});
+    }
+  }
+  writeFileSync(destination, JSON.stringify(mergedPkg, null, 2) + "\n");
+}
+function renderDirectory(source, destination, options) {
+  mkdirSync(destination, { recursive: true });
+  for (const path4 of readdirSync3(source)) {
+    renderTemplate(resolve5(source, path4), resolve5(destination, path4), options);
+  }
+}
+var binaryExtensions = /* @__PURE__ */ new Set([".png", ".jpg", ".jpeg", ".gif", ".ico", ".woff", ".woff2", ".ttf", ".eot", ".svg"]);
+function renderFile(source, destination, options) {
+  const filename = basename2(source);
+  if (filename.startsWith("_")) {
+    destination = resolve5(dirname2(destination), filename.replace("_", "."));
+  }
+  if (filename === "package.json") {
+    mergePkg(source, destination);
+    return;
+  }
+  if (options?.replace && !binaryExtensions.has(extname2(filename))) {
+    let content = readFileSync(source, "utf8");
+    for (const [key, value] of Object.entries(options.replace)) {
+      content = content.replaceAll(key, value);
+    }
+    writeFileSync(destination, content);
+    return;
+  }
+  copyFileSync(source, destination);
+}
+function renderTemplate(source, destination, options) {
+  if (statSync(source).isDirectory()) {
+    renderDirectory(source, destination, options);
+  } else {
+    renderFile(source, destination, options);
+  }
+}
+
+// src/utils/nuxt/renderNuxtTemplate.ts
+import fs3 from "node:fs";
+import path3 from "node:path";
+import { spawnSync as spawnSync2 } from "node:child_process";
+
+// src/utils/nuxt/utils.ts
+import process3 from "node:process";
+import path2 from "node:path";
+import { spawnSync } from "node:child_process";
+import fs2 from "node:fs";
+function detectPkgInfo() {
+  const userAgent2 = process3.env.npm_config_user_agent;
+  if (!userAgent2) {
+    return void 0;
+  }
+  const pkgSpec = userAgent2.split(" ")[0];
+  const pkgSpecArr = pkgSpec.split("/");
+  return {
+    name: pkgSpecArr[0],
+    version: pkgSpecArr[1]
+  };
+}
+function addPackageObject(key, entry, pkg, sort = true) {
+  pkg[key] ??= {};
+  if (!sort) {
+    for (const [name, value] of entry) {
+      pkg[key][name] = value;
+    }
+    return;
+  }
+  const entries = Object.entries(pkg[key]);
+  pkg[key] = {};
+  for (const [name, value] of entry) {
+    entries.push([name, value]);
+  }
+  for (const [k, v] of entries.toSorted(([a], [b]) => a.localeCompare(b))) {
+    pkg[key][k] = v;
+  }
+}
+function runCommand(pmDetection, command, args, cwd2) {
+  let runCommand2 = "npm";
+  let runArgs = [command];
+  if (pmDetection) {
+    const prepare = resolveCommand(pmDetection.name, command, args);
+    runCommand2 = prepare.command;
+    runArgs = prepare.args;
+  }
+  const run2 = spawnSync(
+    runCommand2,
+    runArgs.filter(Boolean),
+    {
+      cwd: cwd2,
+      stdio: ["inherit", "inherit", "pipe"],
+      shell: true
+    }
+  );
+  if (run2.error) {
+    throw run2.error;
+  }
+}
+function editFile(file, callback, destination) {
+  const content = fs2.readFileSync(file, "utf8");
+  fs2.writeFileSync(destination ?? file, callback(content), "utf8");
+}
+function getPaths(rootPath, templateDir) {
+  return [path2.join(rootPath, "app"), templateDir];
+}
+
+// src/utils/nuxt/versions.ts
+var versions = {
+  "vuetify": "^3.11.8",
+  "typescript": "^5.8.3",
+  "vue-tsc": "^3.2.0",
+  "sass-embedded": "^1.89.2",
+  "@vuetify/loader-shared": "^2.1.0",
+  "vite-plugin-vuetify": "^2.1.3",
+  "vuetify-nuxt-module": "^0.19.4",
+  "upath": "^2.0.1",
+  "@mdi/font": "^7.4.47",
+  "@nuxt/fonts": "^0.11.4"
+};
+var versionsV4 = {
+  ...versions,
+  vuetify: "^4.0.0-beta.1"
+};
+
 // src/utils/nuxt/renderNuxtTemplate.ts
 import { generateCode, parseModule } from "magicast";
 import { addNuxtModule, getDefaultExportOptions } from "magicast/helpers";
@@ -1862,11 +2149,13 @@ function configurePackageJson({
   projectName,
   projectRoot,
   useNuxtModule,
-  nuxtPreset
+  nuxtPreset,
+  vuetifyVersion
 }) {
   const packageJson = path3.join(projectRoot, "package.json");
   const pkg = JSON.parse(fs3.readFileSync(path3.join(projectRoot, "package.json"), "utf8"));
   pkg.name = projectName;
+  const v = vuetifyVersion === "4.x" ? versionsV4 : versions;
   const scripts = [
     ["prepare", "nuxt prepare"],
     ["typecheck", "nuxt typecheck"]
@@ -1875,22 +2164,22 @@ function configurePackageJson({
     scripts.push(["lint", "eslint ."], ["lint:fix", "eslint . --fix"]);
   }
   const dependencies = [
-    ["vuetify", versions.vuetify]
+    ["vuetify", v.vuetify]
   ];
   if (dependencies.length > 0) {
     addPackageObject("dependencies", dependencies, pkg);
   }
   const devDependencies = [
-    ["@mdi/font", versions["@mdi/font"]],
-    ["@nuxt/fonts", versions["@nuxt/fonts"]],
-    ["sass-embedded", versions["sass-embedded"]],
-    ["typescript", versions.typescript],
-    ["vue-tsc", versions["vue-tsc"]]
+    ["@mdi/font", v["@mdi/font"]],
+    ["@nuxt/fonts", v["@nuxt/fonts"]],
+    ["sass-embedded", v["sass-embedded"]],
+    ["typescript", v.typescript],
+    ["vue-tsc", v["vue-tsc"]]
   ];
   if (useNuxtModule) {
-    devDependencies.push(["vuetify-nuxt-module", versions["vuetify-nuxt-module"]]);
+    devDependencies.push(["vuetify-nuxt-module", v["vuetify-nuxt-module"]]);
   } else {
-    devDependencies.push(["upath", versions["upath"]], ["@vuetify/loader-shared", versions["@vuetify/loader-shared"]], ["vite-plugin-vuetify", versions["vite-plugin-vuetify"]]);
+    devDependencies.push(["upath", v["upath"]], ["@vuetify/loader-shared", v["@vuetify/loader-shared"]], ["vite-plugin-vuetify", v["vite-plugin-vuetify"]]);
   }
   if (devDependencies.length > 0) {
     addPackageObject("devDependencies", devDependencies, pkg);
@@ -2085,10 +2374,11 @@ function prepareProject(ctx) {
 async function run() {
   const args = process.argv.slice(2).slice();
   const banner = createBanner();
+  const betaBanner = createBetaBanner();
   if (args.length === 0) {
     console.log(`
 ${banner}
-`);
+${betaBanner}`);
     const initialContext2 = {
       canOverwrite: false,
       cwd: process.cwd(),
@@ -2109,7 +2399,7 @@ ${banner}
   }
   console.log(`
 ${banner}
-`);
+${betaBanner}`);
   const cliContext = cliOptionsToContext(cliOptions, process.cwd());
   const initialContext = {
     cwd: cliContext.cwd,
@@ -2121,7 +2411,8 @@ ${banner}
     installDependencies: cliContext.installDependencies,
     useNuxtModule: cliContext.useNuxtModule,
     useNuxtSSR: cliContext.useNuxtSSR,
-    useNuxtSSRClientHints: cliContext.useNuxtSSRClientHints
+    useNuxtSSRClientHints: cliContext.useNuxtSSRClientHints,
+    vuetifyVersion: cliContext.vuetifyVersion
   };
   const finalContext = resolveNonInteractiveContext(initialContext);
   await createProject(finalContext);
@@ -2156,7 +2447,8 @@ async function createProject(finalContext) {
       nuxtPreset: preset,
       useNuxtModule,
       useNuxtSSR,
-      useNuxtSSRClientHints
+      useNuxtSSRClientHints,
+      vuetifyVersion: finalContext.vuetifyVersion
     });
   } else {
     mkdirSync2(projectRoot);
@@ -2164,12 +2456,23 @@ async function createProject(finalContext) {
     console.log("\n\u25CC Generating scaffold...");
     const jsOrTs = useTypeScript ? "typescript" : "javascript";
     const templatePath = resolve6(dirname3(fileURLToPath(import.meta.url)), "../template", jsOrTs);
-    renderTemplate(resolve6(templatePath, "default"), projectRoot);
+    const replace = {
+      "{{VUETIFY_VERSION}}": finalContext.vuetifyVersion === "4.x" ? "4 (Beta)" : "3"
+    };
+    renderTemplate(resolve6(templatePath, "default"), projectRoot, { replace });
     if (["base", "essentials"].includes(usePreset)) {
-      renderTemplate(resolve6(templatePath, "base"), projectRoot);
+      renderTemplate(resolve6(templatePath, "base"), projectRoot, { replace });
     }
     if (["essentials", "recommended"].includes(usePreset)) {
-      renderTemplate(resolve6(templatePath, "essentials"), projectRoot);
+      renderTemplate(resolve6(templatePath, "essentials"), projectRoot, { replace });
+    }
+    if (finalContext.vuetifyVersion === "4.x") {
+      const packageJsonPath = resolve6(projectRoot, "package.json");
+      const packageJson = JSON.parse(readFileSync2(packageJsonPath, "utf8"));
+      if (packageJson.dependencies?.vuetify) {
+        packageJson.dependencies.vuetify = versionsV4.vuetify;
+      }
+      writeFileSync2(packageJsonPath, JSON.stringify(packageJson, null, 2) + "\n");
     }
     if (usePackageManager && installDeps) {
       console.log(`\u25CC Installing dependencies with ${usePackageManager}...

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vuetify",
-  "version": "2.7.3",
+  "version": "2.8.0",
   "author": "Elijah Kotyluk <elijah@elijahkotyluk.com>",
   "license": "MIT",
   "type": "module",
@@ -41,10 +41,11 @@
     "components"
   ],
   "dependencies": {
+    "consola": "^3.4.2",
     "kolorist": "^1.8.0",
     "magicast": "^0.3.5",
     "minimist": "^1.2.8",
-    "package-manager-detector": "^1.3.0",
+    "package-manager-detector": "^1.6.0",
     "prompts": "^2.4.2",
     "tinyexec": "^1.0.1",
     "validate-npm-package-name": "^6.0.2"

package/template/javascript/base/src/components/HelloWorld.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="fill-height" max-width="900">
+  <v-container class="fill-height d-flex align-center" max-width="900">
     <div>
       <v-img
         class="mb-4"
@@ -9,7 +9,7 @@
 
       <div class="mb-8 text-center">
         <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
-        <h1 class="text-h2 font-weight-bold">Vuetify</h1>
+        <h1 class="text-h2 my-0 font-weight-bold">Vuetify</h1>
       </div>
 
       <v-row>

package/template/javascript/default/README.md

@@ -25,7 +25,7 @@ After completing the installation, your environment is ready for Vuetify develop
 
 ## ✨ Features
 
-- 🖼️ **Optimized Front-End Stack**: Leverage the latest Vue 3 and Vuetify 3 for a modern, reactive UI development experience. [Vue 3](https://v3.vuejs.org/) | [Vuetify 3](https://vuetifyjs.com/en/)
+- 🖼️ **Optimized Front-End Stack**: Leverage the latest Vue 3 and Vuetify {{VUETIFY_VERSION}} for a modern, reactive UI development experience. [Vue 3](https://v3.vuejs.org/) | [Vuetify {{VUETIFY_VERSION}}](https://vuetifyjs.com/en/)
 - 🗃️ **State Management**: Integrated with [Pinia](https://pinia.vuejs.org/), the intuitive, modular state management solution for Vue.
 - 🚦 **Routing and Layouts**: Utilizes Vue Router for SPA navigation and vite-plugin-vue-layouts for organizing Vue file layouts. [Vue Router](https://router.vuejs.org/) | [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts)
 - ⚡ **Next-Gen Tooling**: Powered by Vite, experience fast cold starts and instant HMR (Hot Module Replacement). [Vite](https://vitejs.dev/)

package/template/javascript/default/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Welcome to Vuetify 3</title>
+    <title>Welcome to Vuetify {{VUETIFY_VERSION}}</title>
   </head>
   <body>
     <div id="app"></div>

package/template/javascript/default/package.json

@@ -10,15 +10,15 @@
   "dependencies": {
     "@mdi/font": "7.4.47",
     "@fontsource/roboto": "5.2.7",
-    "vue": "^3.5.21",
-    "vuetify": "^3.10.1"
+    "vue": "^3.5.28",
+    "vuetify": "^3.11.8"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
     "sass-embedded": "^1.92.1",
     "unplugin-fonts": "^1.4.0",
     "unplugin-vue-components": "^29.0.0",
-    "vite-plugin-vuetify": "^2.1.2",
+    "vite-plugin-vuetify": "^2.1.3",
     "vite": "^7.1.5"
   }
 }

package/template/javascript/default/src/components/HelloWorld.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="fill-height" max-width="900">
+  <v-container class="fill-height d-flex align-center" max-width="900">
     <div>
       <v-img
         class="mb-4"
@@ -9,7 +9,7 @@
 
       <div class="mb-8 text-center">
         <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
-        <h1 class="text-h2 font-weight-bold">Vuetify</h1>
+        <h1 class="text-h2 my-0 font-weight-bold">Vuetify</h1>
       </div>
 
       <v-row>

package/template/typescript/base/src/components/HelloWorld.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="fill-height" max-width="900">
+  <v-container class="fill-height d-flex align-center" max-width="900">
     <div>
       <v-img
         class="mb-4"
@@ -9,7 +9,7 @@
 
       <div class="mb-8 text-center">
         <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
-        <h1 class="text-h2 font-weight-bold">Vuetify</h1>
+        <h1 class="text-h2 my-0 font-weight-bold">Vuetify</h1>
       </div>
 
       <v-row>

package/template/typescript/default/README.md

@@ -25,7 +25,7 @@ After completing the installation, your environment is ready for Vuetify develop
 
 ## ✨ Features
 
-- 🖼️ **Optimized Front-End Stack**: Leverage the latest Vue 3 and Vuetify 3 for a modern, reactive UI development experience. [Vue 3](https://v3.vuejs.org/) | [Vuetify 3](https://vuetifyjs.com/en/)
+- 🖼️ **Optimized Front-End Stack**: Leverage the latest Vue 3 and Vuetify {{VUETIFY_VERSION}} for a modern, reactive UI development experience. [Vue 3](https://v3.vuejs.org/) | [Vuetify {{VUETIFY_VERSION}}](https://vuetifyjs.com/en/)
 - 🗃️ **State Management**: Integrated with [Pinia](https://pinia.vuejs.org/), the intuitive, modular state management solution for Vue.
 - 🚦 **Routing and Layouts**: Utilizes Vue Router for SPA navigation and vite-plugin-vue-layouts-next for organizing Vue file layouts. [Vue Router](https://router.vuejs.org/) | [vite-plugin-vue-layouts-next](https://github.com/loicduong/vite-plugin-vue-layouts-next)
 - 💻 **Enhanced Development Experience**: Benefit from TypeScript's static type checking and the ESLint plugin suite for Vue, ensuring code quality and consistency. [TypeScript](https://www.typescriptlang.org/) | [ESLint Plugin Vue](https://eslint.vuejs.org/)

package/template/typescript/default/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Welcome to Vuetify 3</title>
+    <title>Welcome to Vuetify {{VUETIFY_VERSION}}</title>
   </head>
   <body>
     <div id="app"></div>

package/template/typescript/default/package.json

@@ -12,8 +12,8 @@
   "dependencies": {
     "@mdi/font": "7.4.47",
     "@fontsource/roboto": "5.2.7",
-    "vue": "^3.5.21",
-    "vuetify": "^3.10.1"
+    "vue": "^3.5.28",
+    "vuetify": "^3.11.8"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.0",
@@ -25,8 +25,8 @@
     "typescript": "~5.9.2",
     "unplugin-fonts": "^1.4.0",
     "unplugin-vue-components": "^29.0.0",
-    "vite-plugin-vuetify": "^2.1.2",
+    "vite-plugin-vuetify": "^2.1.3",
     "vite": "^7.1.5",
-    "vue-tsc": "^3.0.7"
+    "vue-tsc": "^3.2.0"
   }
 }

package/template/typescript/default/src/components/HelloWorld.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="fill-height" max-width="900">
+  <v-container class="fill-height d-flex align-center" max-width="900">
     <div>
       <v-img
         class="mb-4"
@@ -9,7 +9,7 @@
 
       <div class="mb-8 text-center">
         <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
-        <h1 class="text-h2 font-weight-bold">Vuetify</h1>
+        <h1 class="text-h2 my-0 font-weight-bold">Vuetify</h1>
       </div>
 
       <v-row>

package/template/typescript/nuxt/components/HelloWorld.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="fill-height" max-width="900">
+  <v-container class="fill-height d-flex align-center" max-width="900">
     <div>
       <v-img
         class="mb-4"
@@ -9,7 +9,7 @@
 
       <div class="mb-8 text-center">
         <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
-        <h1 class="text-h2 font-weight-bold">Vuetify</h1>
+        <h1 class="text-h2 my-0 font-weight-bold">Vuetify</h1>
       </div>
 
       <v-row>