feat(vuetify): add version selection for Vuetify 3 and 4

Add support for selecting Vuetify version (3.x or 4.x beta) during project creation. This includes:
- New prompt in CLI and VSCode extension
- Updated i18n strings for English and Russian locales
- Version-specific dependency resolution in scaffold function
- Propagation of version selection through the create pipeline

Allows users to opt into the Vuetify 4 beta while maintaining 3.x as the default.

Author: AndreyYolkin

packages/shared/src/functions/create.ts

@@ -156,6 +156,7 @@ export async function createVuetify (options: CreateVuetifyOptions, commandOptio
       name: context.name,
       platform: context.platform as 'vue' | 'nuxt',
       type: context.type as 'vuetify' | 'vuetify0',
+      vuetifyVersion: context.vuetifyVersion,
       features: context.features,
       typescript: !!context.typescript,
       packageManager: context.packageManager,

packages/shared/src/functions/scaffold.ts

@@ -12,6 +12,7 @@ export interface ScaffoldOptions {
   name: string
   platform: 'vue' | 'nuxt'
   type: 'vuetify' | 'vuetify0'
+  vuetifyVersion?: '3.x' | '4.x'
   features: string[]
   typescript: boolean
   packageManager?: string
@@ -41,6 +42,7 @@ export async function scaffold (options: ScaffoldOptions, callbacks: ScaffoldCal
     features,
     typescript,
     type,
+    vuetifyVersion,
     packageManager,
     install,
     force,
@@ -105,6 +107,10 @@ export async function scaffold (options: ScaffoldOptions, callbacks: ScaffoldCal
   let pkg
   pkg = await readPackageJSON(join(projectRoot, 'package.json'))
 
+  if (vuetifyVersion === '4.x' && pkg.dependencies && pkg.dependencies.vuetify) {
+    pkg.dependencies.vuetify = '^4.0.0-beta.1'
+  }
+
   callbacks.onConfigStart?.()
   if (features && features.length > 0) {
     await applyFeatures(projectRoot, features, pkg, !!typescript, platform === 'nuxt', clientHints, type)

packages/shared/src/i18n/locales/en.json

@@ -128,6 +128,11 @@
         "hint": "Headless Component Library"
       }
     },
+    "vuetify_version": {
+      "select": "Select Vuetify version:",
+      "3_x": "Vuetify 3 (latest)",
+      "4_x": "Vuetify 4 (beta)"
+    },
     "css_framework": {
       "select": "Which CSS framework?",
       "unocss": {

packages/shared/src/i18n/locales/ru.json

@@ -123,6 +123,11 @@
         "hint": "Библиотека headless компонентов"
       }
     },
+    "vuetify_version": {
+      "select": "Выберите версию Vuetify:",
+      "3_x": "Vuetify 3 (стабильная)",
+      "4_x": "Vuetify 4 (бета)"
+    },
     "css_framework": {
       "select": "Какой фреймворк CSS вы хотите использовать?",
       "none": "Никакой",

packages/shared/src/prompts.ts

@@ -21,6 +21,7 @@ export interface ProjectOptions {
   interactive?: boolean
   css?: 'unocss' | 'tailwindcss' | 'none'
   router?: 'router' | 'file-router' | 'none'
+  vuetifyVersion?: '3.x' | '4.x'
 }
 
 export async function prompt (args: Partial<ProjectOptions>, cwd = process.cwd()): Promise<ProjectOptions> {
@@ -98,6 +99,29 @@ export async function prompt (args: Partial<ProjectOptions>, cwd = process.cwd()
         ],
       })
     },
+    vuetifyVersion: ({ results }) => {
+      const type = (results.type as string) || args.type
+      if (type !== 'vuetify') {
+        return Promise.resolve(undefined)
+      }
+
+      if (args.vuetifyVersion) {
+        return Promise.resolve(args.vuetifyVersion)
+      }
+
+      if (!args.interactive) {
+        return Promise.resolve('3.x')
+      }
+
+      return select({
+        message: i18n.t('prompts.vuetify_version.select'),
+        initialValue: '3.x',
+        options: [
+          { label: i18n.t('prompts.vuetify_version.3_x'), value: '3.x' },
+          { label: i18n.t('prompts.vuetify_version.4_x'), value: '4.x' },
+        ],
+      })
+    },
     cssFramework: ({ results }) => {
       const type = (results.type as string) || args.type
       if (type !== 'vuetify0') {

packages/vscode/src/commands/create.ts

@@ -73,6 +73,7 @@ export async function createProject () {
     ? {
         platform: preset.platform || 'vue',
         type: preset.type || 'vuetify',
+        vuetifyVersion: preset.vuetifyVersion,
         features: preset.features || [],
         typescript: preset.typescript ?? true,
         packageManager: preset.packageManager || 'npm',
@@ -135,6 +136,7 @@ export async function createProject () {
 interface ProjectConfig {
   platform: 'vue' | 'nuxt'
   type: 'vuetify' | 'vuetify0'
+  vuetifyVersion?: '3.x' | '4.x'
   features: string[]
   typescript: boolean
   packageManager: string
@@ -228,6 +230,22 @@ async function collectManualOptions (): Promise<ProjectConfig | undefined> {
   }
   const type = templateItem.value
 
+  // Select Vuetify Version
+  let vuetifyVersion: '3.x' | '4.x' | undefined
+  if (type === 'vuetify') {
+    const versionItem = await window.showQuickPick<StringItem>(
+      [
+        { label: 'Vuetify 3 (Latest)', value: '3.x', picked: true },
+        { label: 'Vuetify 4 (Beta)', value: '4.x' },
+      ],
+      { placeHolder: 'Select Vuetify Version' },
+    )
+    if (!versionItem) {
+      return
+    }
+    vuetifyVersion = versionItem.value as '3.x' | '4.x'
+  }
+
   // CSS Framework (only for Vuetify 0)
   let cssFramework = 'none'
   if (type === 'vuetify0') {
@@ -361,6 +379,7 @@ async function collectManualOptions (): Promise<ProjectConfig | undefined> {
   return {
     platform,
     type,
+    vuetifyVersion,
     features,
     typescript,
     packageManager,