create-vuetify 2.7.2 → 2.8.0-beta.1

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";
@@ -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 (Alpha)", 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.2",
+  version: "2.8.0-beta.1",
   author: "Elijah Kotyluk <elijah@elijahkotyluk.com>",
   license: "MIT",
   type: "module",
@@ -1261,7 +1273,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 +1290,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 (Alpha)
   -h, --help                         Show help
   -v, --version                      Show version
 
@@ -1315,6 +1328,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 +1339,7 @@ function parseCliArgs(args) {
       "nuxtModule",
       "nuxtSSR",
       "nuxtSSRClientHints",
+      "v4",
       "help",
       "version"
     ],
@@ -1350,6 +1365,7 @@ function parseCliArgs(args) {
     nuxtModule: argv.nuxtModule,
     nuxtSSR: argv.nuxtSSR,
     nuxtSSRClientHints: argv.nuxtSSRClientHints,
+    v4: argv.v4,
     help: argv.help,
     version: argv.version
   };
@@ -1365,7 +1381,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
   };
 }
 
@@ -1408,7 +1425,7 @@ var deepMerge = (...sources) => sources.reduce((acc, curr) => {
 
 // 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";
+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"));
@@ -1421,28 +1438,37 @@ function mergePkg(source, destination) {
   }
   writeFileSync(destination, JSON.stringify(mergedPkg, null, 2) + "\n");
 }
-function renderDirectory(source, destination) {
+function renderDirectory(source, destination, options) {
   mkdirSync(destination, { recursive: true });
   for (const path4 of readdirSync3(source)) {
-    renderTemplate(resolve5(source, path4), resolve5(destination, path4));
+    renderTemplate(resolve5(source, path4), resolve5(destination, path4), options);
   }
 }
-function renderFile(source, destination) {
+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);
-  } else {
-    copyFileSync(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) {
+function renderTemplate(source, destination, options) {
   if (statSync(source).isDirectory()) {
-    renderDirectory(source, destination);
+    renderDirectory(source, destination, options);
   } else {
-    renderFile(source, destination);
+    renderFile(source, destination, options);
   }
 }
 
@@ -1647,15 +1673,19 @@ function getPaths(rootPath, templateDir) {
 var versions = {
   "vuetify": "^3.9.1",
   "typescript": "^5.8.3",
-  "vue-tsc": "^3.0.1",
+  "vue-tsc": "^3.2.0",
   "sass-embedded": "^1.89.2",
   "@vuetify/loader-shared": "^2.1.0",
   "vite-plugin-vuetify": "^2.1.1",
-  "vuetify-nuxt-module": "^0.18.7",
+  "vuetify-nuxt-module": "^0.19.1",
   "upath": "^2.0.1",
   "@mdi/font": "^7.4.47",
   "@nuxt/fonts": "^0.11.4"
 };
+var versionsV4 = {
+  ...versions,
+  vuetify: "^4.0.0-alpha.1"
+};
 
 // node_modules/.pnpm/package-manager-detector@1.3.0/node_modules/package-manager-detector/dist/constants.mjs
 var AGENTS = [
@@ -1862,11 +1892,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 +1907,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);
@@ -2121,7 +2153,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 +2189,8 @@ async function createProject(finalContext) {
       nuxtPreset: preset,
       useNuxtModule,
       useNuxtSSR,
-      useNuxtSSRClientHints
+      useNuxtSSRClientHints,
+      vuetifyVersion: finalContext.vuetifyVersion
     });
   } else {
     mkdirSync2(projectRoot);
@@ -2164,18 +2198,29 @@ 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 (Alpha)" : "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 (usePackageManager && installDeps) {
       console.log(`\u25CC Installing dependencies with ${usePackageManager}...
 `);
       await installDependencies2(projectRoot, usePackageManager);
     }
+    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");
+    }
   }
   console.log(`
 ${projectName} has been generated at ${projectRoot}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vuetify",
-  "version": "2.7.2",
+  "version": "2.8.0-beta.1",
   "author": "Elijah Kotyluk <elijah@elijahkotyluk.com>",
   "license": "MIT",
   "type": "module",

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/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

package/template/javascript/default/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "vue.hover.rich": true
+}

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/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/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

package/template/typescript/default/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "vue.hover.rich": true
+}

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

@@ -27,6 +27,6 @@
     "unplugin-vue-components": "^29.0.0",
     "vite-plugin-vuetify": "^2.1.2",
     "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>