feat(presets): enhance preset system with user presets and improved UX

- Add new `presets` subcommand to create-vuetify, create-vuetify0, and vuetify CLI
- Support loading user presets by display name or slug from ~/.vuetify/create/presets/
- Add interactive preset selection when creating projects without --preset flag
- Move preset utilities to shared package for reuse across CLI tools
- Update i18n strings for better preset usage guidance
- Add test for loading user preset by display name
- Fix tsconfig vueCompilerOptions update to preserve formatting

Author: AndreyYolkin

packages/cli/src/index.ts

@@ -1,6 +1,6 @@
 import tab from '@bomb.sh/tab/citty'
 import { createBanner, registerProjectArgsCompletion } from '@vuetify/cli-shared'
-import { add } from '@vuetify/cli-shared/commands'
+import { add, createPresetsCommand } from '@vuetify/cli-shared/commands'
 import { i18n } from '@vuetify/cli-shared/i18n'
 
 import { defineCommand, runMain, showUsage } from 'citty'
@@ -11,6 +11,8 @@ import { init } from './commands/init'
 import { update } from './commands/update'
 import { upgrade } from './commands/upgrade'
 
+const presets = createPresetsCommand({ version, type: 'vuetify' })
+
 export const main = defineCommand({
   meta: {
     name: 'vuetify',
@@ -19,6 +21,7 @@ export const main = defineCommand({
   },
   subCommands: {
     init,
+    presets,
     add,
     update,
     docs,
@@ -41,6 +44,10 @@ await tab(main).then(completion => {
   if (initCommand) {
     registerProjectArgsCompletion(initCommand)
   }
+  const presetsCommand = completion.commands.get('presets')
+  if (presetsCommand) {
+    registerProjectArgsCompletion(presetsCommand)
+  }
 })
 
 runMain(main)

packages/create/debug-nuxt/README.md

@@ -0,0 +1,81 @@
+# Vuetify (Default)
+
+This is the official scaffolding tool for Vuetify, designed to give you a head start in building your new Vuetify application. It sets up a base template with all the necessary configurations and standard directory structure, enabling you to begin development without the hassle of setting up the project from scratch.
+
+## ❗️ Important Links
+
+- 📄 [Docs](https://vuetifyjs.com/)
+- 🚨 [Issues](https://issues.vuetifyjs.com/)
+- 🏬 [Store](https://store.vuetifyjs.com/)
+- 🎮 [Playground](https://play.vuetifyjs.com/)
+- 💬 [Discord](https://community.vuetifyjs.com)
+
+## 💿 Install
+
+Set up your project using your preferred package manager. Use the corresponding command to install the dependencies:
+
+| Package Manager                                                | Command        |
+|---------------------------------------------------------------|----------------|
+| [yarn](https://yarnpkg.com/getting-started)                   | `yarn install` |
+| [npm](https://docs.npmjs.com/cli/v7/commands/npm-install)     | `npm install`  |
+| [pnpm](https://pnpm.io/installation)                          | `pnpm install` |
+| [bun](https://bun.sh/#getting-started)                        | `bun install`  |
+
+After completing the installation, your environment is ready for Vuetify development.
+
+## ✨ Features
+
+- 🖼️ **Optimized Front-End Stack**: Leverage the latest Vue 3 and Vuetify 4 for a modern, reactive UI development experience. [Vue 3](https://v3.vuejs.org/) | [Vuetify 4](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/)
+- ⚡ **Next-Gen Tooling**: Powered by Vite, experience fast cold starts and instant HMR (Hot Module Replacement). [Vite](https://vitejs.dev/)
+- 🧩 **Automated Component Importing**: Streamline your workflow with unplugin-vue-components, automatically importing components as you use them. [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components)
+- 🛠️ **Strongly-Typed Vue**: Use vue-tsc for type-checking your Vue components, and enjoy a robust development experience. [vue-tsc](https://github.com/johnsoncodehk/volar/tree/master/packages/vue-tsc)
+
+These features are curated to provide a seamless development experience from setup to deployment, ensuring that your Vuetify application is both powerful and maintainable.
+
+## 💡 Usage
+
+This section covers how to start the development server and build your project for production.
+
+### Starting the Development Server
+
+To start the development server with hot-reload, run the following command. The server will be accessible at [http://localhost:3000](http://localhost:3000):
+
+```bash
+yarn dev
+```
+
+(Repeat for npm, pnpm, and bun with respective commands.)
+
+> Add NODE_OPTIONS='--no-warnings' to suppress the JSON import warnings that happen as part of the Vuetify import mapping. If you are on Node [v21.3.0](https://nodejs.org/en/blog/release/v21.3.0) or higher, you can change this to NODE_OPTIONS='--disable-warning=5401'. If you don't mind the warning, you can remove this from your package.json dev script.
+
+### Building for Production
+
+To build your project for production, use:
+
+```bash
+yarn build
+```
+
+(Repeat for npm, pnpm, and bun with respective commands.)
+
+Once the build process is completed, your application will be ready for deployment in a production environment.
+
+## 💪 Support Vuetify Development
+
+This project is built with [Vuetify](https://vuetifyjs.com/en/), a UI Library with a comprehensive collection of Vue components. Vuetify is an MIT licensed Open Source project that has been made possible due to the generous contributions by our [sponsors and backers](https://vuetifyjs.com/introduction/sponsors-and-backers/). If you are interested in supporting this project, please consider:
+
+- [Requesting Enterprise Support](https://support.vuetifyjs.com/)
+- [Sponsoring John on Github](https://github.com/users/johnleider/sponsorship)
+- [Sponsoring Kael on Github](https://github.com/users/kaelwd/sponsorship)
+- [Supporting the team on Open Collective](https://opencollective.com/vuetify)
+- [Becoming a sponsor on Patreon](https://www.patreon.com/vuetify)
+- [Becoming a subscriber on Tidelift](https://tidelift.com/subscription/npm/vuetify)
+- [Making a one-time donation with Paypal](https://paypal.me/vuetify)
+
+## 📑 License
+[MIT](http://opensource.org/licenses/MIT)
+
+Copyright (c) 2016-present Vuetify, LLC

packages/create/debug-nuxt/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-vue-layouts-next/client" />

packages/create/debug-nuxt/eslint.config.js

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

packages/create/debug-nuxt/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <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 4</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

packages/create/debug-nuxt/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "debug-nuxt",
+  "private": true,
+  "type": "module",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force"
+  },
+  "dependencies": {
+    "@fontsource/roboto": "^5.2.9",
+    "@mdi/font": "7.4.47",
+    "vue": "^3.5.26",
+    "vuetify": "^4.0.0"
+  },
+  "devDependencies": {
+    "@tsconfig/node22": "^22.0.5",
+    "@types/node": "^22.0.5",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vue/tsconfig": "^0.9.0",
+    "npm-run-all2": "^8.0.4",
+    "sass-embedded": "^1.97.1",
+    "typescript": "~5.9.3",
+    "unplugin-fonts": "^1.4.0",
+    "vite": "^8.0.0",
+    "vite-plugin-vuetify": "^2.1.3",
+    "vue-tsc": "^3.2.0"
+  },
+  "overrides": {
+    "unplugin-fonts": {
+      "vite": "^8.0.0"
+    }
+  }
+}

packages/create/debug-nuxt/public/favicon.ico

@@ -0,0 +1,18 @@
+<template>
+  <v-app>
+    <v-main>
+      <HelloWorld />
+    </v-main>
+    <v-btn
+      class="ma-2"
+      icon="mdi-theme-light-dark"
+      location="top right"
+      position="absolute"
+      @click="$vuetify.theme.cycle()"
+    />
+  </v-app>
+</template>
+
+<script lang="ts" setup>
+  import HelloWorld from '@/components/HelloWorld.vue'
+</script>