create-vuetify 2.8.0-beta.1 → 3.0.12-beta-next.1

package/package.json

@@ -1,71 +1,41 @@
 {
   "name": "create-vuetify",
-  "version": "2.8.0-beta.1",
-  "author": "Elijah Kotyluk <elijah@elijahkotyluk.com>",
-  "license": "MIT",
+  "version": "3.0.12-beta-next.1",
+  "description": "Create a new Vuetify project",
   "type": "module",
   "bin": {
-    "create-vuetify": "bin/index.js"
-  },
-  "files": [
-    "bin/index.js",
-    "template",
-    "dist"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/vuetifyjs/create.git"
-  },
-  "bugs": {
-    "url": "https://github.com/vuetifyjs/create/issues"
-  },
-  "keywords": [
-    "vuetify",
-    "vue",
-    "vue3",
-    "ui",
-    "scaffolding",
-    "cli",
-    "template",
-    "create",
-    "boilerplate",
-    "starter",
-    "typescript",
-    "javascript",
-    "vite",
-    "pinia",
-    "vue-router",
-    "nuxt",
-    "material-design",
-    "material-ui",
-    "components"
-  ],
-  "dependencies": {
-    "kolorist": "^1.8.0",
-    "magicast": "^0.3.5",
-    "minimist": "^1.2.8",
-    "package-manager-detector": "^1.3.0",
-    "prompts": "^2.4.2",
-    "tinyexec": "^1.0.1",
-    "validate-npm-package-name": "^6.0.2"
+    "create-vuetify": "./dist/index.mjs"
   },
+  "keywords": [],
+  "author": "Andrey Yolkin <andreyyolkin@gmail.com>",
+  "license": "MIT",
   "devDependencies": {
-    "@types/minimist": "^1.2.5",
-    "@types/node": "^22.18.5",
-    "@types/prompts": "^2.4.9",
+    "@bomb.sh/tab": "^0.0.11",
+    "@clack/prompts": "^1.0.0-alpha.9",
     "@types/validate-npm-package-name": "^4.0.2",
-    "bumpp": "^10.2.3",
-    "esbuild": "^0.25.9",
-    "eslint": "^9.35.0",
-    "eslint-config-vuetify": "^4.2.0",
+    "citty": "^0.1.6",
+    "giget": "^2.0.0",
+    "kolorist": "^1.8.0",
     "nypm": "^0.6.2",
-    "typescript": "^5.9.2"
+    "pathe": "^2.0.3",
+    "tsdown": "^0.16.8",
+    "vitest": "^4.0.17",
+    "@vuetify/cli-shared": "0.0.12-beta.1"
+  },
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "magicast": "^0.5.1",
+    "package-manager-detector": "^1.6.0",
+    "pkg-types": "^2.3.0",
+    "tinyexec": "^1.0.2",
+    "validate-npm-package-name": "^7.0.2"
   },
   "scripts": {
-    "build": "node ./scripts/build.js",
-    "start": "node ./index.js",
-    "dev": "node --run build && node --run start",
-    "lint": "eslint --fix .",
-    "release": "bumpp"
+    "build": "tsdown"
   }
 }

package/src/commands/upgrade.ts

@@ -0,0 +1,5 @@
+import { commandUpgradeFabric } from '@vuetify/cli-shared'
+
+export const upgrade = commandUpgradeFabric('create-vuetify')
+
+export default upgrade

package/src/index.ts

@@ -0,0 +1,40 @@
+import tab from '@bomb.sh/tab/citty'
+import { createVuetify, projectArgs, registerProjectArgsCompletion } from '@vuetify/cli-shared'
+import { i18n } from '@vuetify/cli-shared/i18n'
+import { defineCommand, runMain } from 'citty'
+
+import { version } from '../package.json'
+import { upgrade } from './commands/upgrade'
+
+export const main = defineCommand({
+  meta: {
+    name: 'create-vuetify',
+    version,
+    description: i18n.t('cli.create.description'),
+  },
+  args: {
+    ...projectArgs(),
+    cwd: {
+      type: 'string',
+      description: 'The current working directory',
+    },
+  },
+  run: async ({ args }) => {
+    if (args._[0] === 'complete') {
+      return
+    }
+    await createVuetify({
+      ...args,
+      version,
+    })
+  },
+  subCommands: {
+    upgrade,
+  },
+})
+
+await tab(main).then(completion => {
+  registerProjectArgsCompletion(completion)
+})
+
+runMain(main)

package/test/index.test.ts

@@ -0,0 +1,117 @@
+import fs from 'node:fs'
+import { join, resolve } from 'pathe'
+import { x } from 'tinyexec'
+import { afterAll, beforeAll, describe, expect, it } from 'vitest'
+
+const CLI_PATH = resolve(__dirname, '../dist/index.mjs')
+// Assuming templates are at the root of the repo
+const TEMPLATES_PATH = resolve(__dirname, '../../../templates')
+const TEMP_DIR = resolve(__dirname, '../.test-tmp')
+
+const TIMEOUT = 10_000 // 10s
+
+describe('create-vuetify matrix', () => {
+  beforeAll(() => {
+    if (!fs.existsSync(TEMP_DIR)) {
+      fs.mkdirSync(TEMP_DIR)
+    }
+  })
+
+  afterAll(() => {
+    // fs.rmSync(TEMP_DIR, { recursive: true, force: true })
+  })
+
+  const runCli = async (args: string[], cwd: string) => {
+    try {
+      const proc = x('node', [CLI_PATH, ...args], {
+        nodeOptions: {
+          cwd,
+          env: {
+            ...process.env,
+            VUETIFY_CLI_TEMPLATES_PATH: TEMPLATES_PATH,
+          },
+        },
+        throwOnError: true,
+      })
+
+      for await (const line of proc) {
+        console.log(line)
+      }
+
+      return await proc
+    } catch (error: any) {
+      console.error('Command failed:', error.message)
+      console.error('STDOUT:', error.stdout)
+      console.error('STDERR:', error.stderr)
+      throw error
+    }
+  }
+
+  const matrix = [
+    // Vue + JS
+    { name: 'vue-js', args: ['--type=vue', '--no-typescript', '--features='] },
+    // Vue + TS
+    { name: 'vue-ts', args: ['--type=vue', '--typescript', '--features='] },
+    // Vue + TS + Router
+    { name: 'vue-ts-router', args: ['--type=vue', '--typescript', '--router=router'] },
+    // Vue + TS + Pinia
+    { name: 'vue-ts-pinia', args: ['--type=vue', '--typescript', '--features=pinia'] },
+    // Vue + TS + ESLint
+    { name: 'vue-ts-eslint', args: ['--type=vue', '--typescript', '--features=eslint'] },
+    // Vue + TS + All
+    { name: 'vue-ts-all', args: ['--type=vue', '--typescript', '--router=router', '--features=pinia,eslint'] },
+
+    // Nuxt
+    { name: 'nuxt', args: ['--type=nuxt', '--features='] },
+    // Nuxt + Pinia
+    { name: 'nuxt-pinia', args: ['--type=nuxt', '--features=pinia'] },
+    // Nuxt + Vuetify Module
+    { name: 'nuxt-module', args: ['--type=nuxt', '--features=vuetify-nuxt-module'] },
+    // Nuxt + All
+    { name: 'nuxt-all', args: ['--type=nuxt', '--features=pinia,eslint,vuetify-nuxt-module'] },
+  ]
+
+  for (const { name, args } of matrix) {
+    it(`should create project ${name}`, async () => {
+      const projectName = `test-${name}`
+      const projectPath = join(TEMP_DIR, projectName)
+
+      // Clean up previous run
+      if (fs.existsSync(projectPath)) {
+        fs.rmSync(projectPath, { recursive: true, force: true })
+      }
+
+      const cliArgs = [`--name=${projectName}`, ...args, '--package-manager=pnpm', '--force', '--no-install', '--no-interactive']
+
+      console.log(`Running: create-vuetify ${cliArgs.join(' ')}`)
+      const { stdout, stderr } = await runCli(cliArgs, TEMP_DIR)
+      console.log('STDOUT:', stdout)
+      if (stderr) {
+        console.error('STDERR:', stderr)
+      }
+
+      expect(fs.existsSync(projectPath)).toBe(true)
+      expect(fs.existsSync(join(projectPath, 'package.json'))).toBe(true)
+
+      // Basic check for file structure
+      if (args.includes('vue')) {
+        expect(fs.existsSync(join(projectPath, 'src/main.ts')) || fs.existsSync(join(projectPath, 'src/main.js'))).toBe(true)
+      } else if (args.includes('nuxt')) {
+        expect(fs.existsSync(join(projectPath, 'nuxt.config.ts'))).toBe(true)
+
+        // Check for modules/vuetify.ts and dependencies
+        const hasModuleFeature = args.some(arg => arg.includes('vuetify-nuxt-module'))
+        if (hasModuleFeature) {
+          expect(fs.existsSync(join(projectPath, 'modules/vuetify.ts'))).toBe(false)
+        } else {
+          expect(fs.existsSync(join(projectPath, 'modules/vuetify.ts'))).toBe(true)
+
+          const pkg = JSON.parse(fs.readFileSync(join(projectPath, 'package.json'), 'utf8'))
+          expect(pkg.devDependencies).toHaveProperty('vite-plugin-vuetify')
+          expect(pkg.devDependencies).toHaveProperty('@vuetify/loader-shared')
+          expect(pkg.devDependencies).toHaveProperty('pathe')
+        }
+      }
+    }, TIMEOUT)
+  }
+})

package/tsdown.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'tsdown/config'
+
+export default defineConfig({
+  entry: './src/index.ts',
+  banner: `#!/usr/bin/env node`,
+  exports: true,
+})

package/bin/index.js

@@ -1,3 +0,0 @@
-#!/usr/bin/env node
-
-import '../dist/index.mjs'

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

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

package/template/javascript/base/package.json

@@ -1,13 +0,0 @@
-{
-  "scripts": {
-    "lint": "eslint . --fix"
-  },
-  "dependencies": {
-    "vue-router": "^4.5.1"
-  },
-  "devDependencies": {
-    "eslint": "^9.35.0",
-    "eslint-config-vuetify": "^4.2.0",
-    "unplugin-vue-router": "^0.15.0"
-  }
-}

package/template/javascript/base/src/App.vue

@@ -1,11 +0,0 @@
-<template>
-  <v-app>
-    <v-main>
-      <router-view />
-    </v-main>
-  </v-app>
-</template>
-
-<script setup>
-  //
-</script>

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

@@ -1,90 +0,0 @@
-<template>
-  <v-container class="fill-height d-flex align-center" max-width="900">
-    <div>
-      <v-img
-        class="mb-4"
-        height="150"
-        src="@/assets/logo.png"
-      />
-
-      <div class="mb-8 text-center">
-        <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
-        <h1 class="text-h2 my-0 font-weight-bold">Vuetify</h1>
-      </div>
-
-      <v-row>
-        <v-col cols="12">
-          <v-card
-            class="py-4"
-            color="surface-variant"
-            image="https://cdn.vuetifyjs.com/docs/images/one/create/feature.png"
-            prepend-icon="mdi-rocket-launch-outline"
-            rounded="lg"
-            variant="tonal"
-          >
-            <template #image>
-              <v-img position="top right" />
-            </template>
-
-            <template #title>
-              <h2 class="text-h5 font-weight-bold">
-                Get started
-              </h2>
-            </template>
-
-            <template #subtitle>
-              <div class="text-subtitle-1">
-                Change this page by updating <v-kbd>{{ `<HelloWorld />` }}</v-kbd> in <v-kbd>components/HelloWorld.vue</v-kbd>.
-              </div>
-            </template>
-          </v-card>
-        </v-col>
-
-        <v-col v-for="link in links" :key="link.href" cols="6">
-          <v-card
-            append-icon="mdi-open-in-new"
-            class="py-4"
-            color="surface-variant"
-            :href="link.href"
-            :prepend-icon="link.icon"
-            rel="noopener noreferrer"
-            rounded="lg"
-            :subtitle="link.subtitle"
-            target="_blank"
-            :title="link.title"
-            variant="tonal"
-          />
-        </v-col>
-      </v-row>
-    </div>
-  </v-container>
-</template>
-
-<script setup>
-  const links = [
-    {
-      href: 'https://vuetifyjs.com/',
-      icon: 'mdi-text-box-outline',
-      subtitle: 'Learn about all things Vuetify in our documentation.',
-      title: 'Documentation',
-    },
-    {
-      href: 'https://vuetifyjs.com/introduction/why-vuetify/#feature-guides',
-      icon: 'mdi-star-circle-outline',
-      subtitle: 'Explore available framework Features.',
-      title: 'Features',
-    },
-    {
-      href: 'https://vuetifyjs.com/components/all',
-      icon: 'mdi-widgets-outline',
-      subtitle: 'Discover components in the API Explorer.',
-      title: 'Components',
-    },
-    {
-      href: 'https://discord.vuetifyjs.com',
-      icon: 'mdi-account-group-outline',
-      subtitle: 'Connect with Vuetify developers.',
-      title: 'Community',
-    },
-  ]
-</script>

package/template/javascript/base/src/pages/README.md

@@ -1,5 +0,0 @@
-# Pages
-
-Vue components created in this folder will automatically be converted to navigatable routes.
-
-Full documentation for this feature can be found in the Official [unplugin-vue-router](https://github.com/posva/unplugin-vue-router) repository.

package/template/javascript/base/src/pages/index.vue

@@ -1,7 +0,0 @@
-<template>
-  <HelloWorld />
-</template>
-
-<script setup>
-  //
-</script>

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

@@ -1,15 +0,0 @@
-/**
- * plugins/index.js
- *
- * Automatically included in `./src/main.js`
- */
-
-// Plugins
-import vuetify from './vuetify'
-import router from '@/router'
-
-export function registerPlugins (app) {
-  app
-    .use(vuetify)
-    .use(router)
-}

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

@@ -1,35 +0,0 @@
-/**
- * router/index.ts
- *
- * Automatic routes for `./src/pages/*.vue`
- */
-
-// Composables
-import { createRouter, createWebHistory } from 'vue-router'
-import { routes } from 'vue-router/auto-routes'
-
-const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes,
-})
-
-// 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')) {
-      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(err)
-  }
-})
-
-router.isReady().then(() => {
-  localStorage.removeItem('vuetify:dynamic-reload')
-})
-
-export default router

package/template/javascript/base/src/styles/README.md

@@ -1,3 +0,0 @@
-# Styles
-
-This directory is for configuring the styles of the application.

package/template/javascript/base/src/styles/settings.scss

@@ -1,10 +0,0 @@
-/**
- * src/styles/settings.scss
- *
- * Configures SASS variables and Vuetify overwrites
- */
-
-// https://vuetifyjs.com/features/sass-variables/`
-// @use 'vuetify/settings' with (
-//   $color-pack: false
-// );

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

@@ -1,66 +0,0 @@
-// Plugins
-import Components from 'unplugin-vue-components/vite'
-import Vue from '@vitejs/plugin-vue'
-import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
-import Fonts from 'unplugin-fonts/vite'
-import VueRouter from 'unplugin-vue-router/vite'
-
-// Utilities
-import { defineConfig } from 'vite'
-import { fileURLToPath, URL } from 'node:url'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    VueRouter(),
-    Vue({
-      template: { transformAssetUrls },
-    }),
-    // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
-    Vuetify({
-      autoImport: true,
-      styles: {
-        configFile: 'src/styles/settings.scss',
-      },
-    }),
-    Components(),
-    Fonts({
-      fontsource: {
-        families: [
-          {
-            name: 'Roboto',
-            weights: [100, 300, 400, 500, 700, 900],
-            styles: ['normal', 'italic'],
-          },
-        ],
-      },
-    }),
-  ],
-  optimizeDeps: {
-    exclude: [
-      'vuetify',
-      'vue-router',
-      'unplugin-vue-router/runtime',
-      'unplugin-vue-router/data-loaders',
-      'unplugin-vue-router/data-loaders/basic',
-    ],
-  },
-  define: { 'process.env': {} },
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('src', import.meta.url)),
-    },
-    extensions: [
-      '.js',
-      '.json',
-      '.jsx',
-      '.mjs',
-      '.ts',
-      '.tsx',
-      '.vue',
-    ],
-  },
-  server: {
-    port: 3000,
-  },
-})

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

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

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

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

package/template/javascript/default/README.md

@@ -1,79 +0,0 @@
-# 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 {{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/)
-- 🧩 **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)
-
-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

package/template/javascript/default/_browserslistrc

@@ -1,4 +0,0 @@
-> 1%
-last 2 versions
-not dead
-not ie 11

package/template/javascript/default/_editorconfig

@@ -1,5 +0,0 @@
-[*.{js,jsx,ts,tsx,vue}]
-indent_style = space
-indent_size = 2
-trim_trailing_whitespace = true
-insert_final_newline = true