feat: add support for Vuetify 3.4 (#151)

* feat: add support for Vuetify 3.4

* chore: cleanup

Author: userquin

src/module.ts

@@ -6,6 +6,7 @@ import {
   isNuxt3,
   useLogger,
 } from '@nuxt/kit'
+import { getPackageInfo } from 'local-pkg'
 import { version } from '../package.json'
 import type { ModuleOptions } from './types'
 import type { VuetifyNuxtContext } from './utils/config'
@@ -40,6 +41,10 @@ export default defineNuxtModule<ModuleOptions>({
     if (!isNuxt3(nuxt))
       logger.error(`Cannot support nuxt version: ${getNuxtVersion(nuxt)}`)
 
+    const vuetifyPkg = await getPackageInfo('vuetify')
+    const versions = vuetifyPkg?.version?.split('.').map(v => Number.parseInt(v))
+    const vuetify3_4 = versions && versions.length > 1 && versions[0] >= 3 && versions[1] >= 4
+
     const ctx: VuetifyNuxtContext = {
       logger,
       resolver: createResolver(import.meta.url),
@@ -55,6 +60,7 @@ export default defineNuxtModule<ModuleOptions>({
       ssrClientHints: undefined!,
       componentsPromise: undefined!,
       labComponentsPromise: undefined!,
+      vuetify3_4,
     }
 
     await load(options, nuxt, ctx)

src/utils/config.ts

@@ -25,6 +25,7 @@ export interface VuetifyNuxtContext {
   ssrClientHints: ResolvedClientHints
   componentsPromise: Promise<VuetifyComponentsImportMap>
   labComponentsPromise: Promise<VuetifyComponentsImportMap>
+  vuetify3_4?: boolean
 }
 
 export async function loadVuetifyConfiguration<U extends ExternalVuetifyOptions>(

src/vite/vuetify-configuration-plugin.ts

@@ -182,7 +182,8 @@ async function buildConfiguration(ctx: VuetifyNuxtContext) {
     if (typeof labComponents === 'boolean') {
       config.imports.push('import * as labsComponents from \'vuetify/labs/components\'')
       config.labComponents.add('*')
-      addDatePicker = false
+      if (ctx.vuetify3_4 === false)
+        addDatePicker = false
     }
     else if (typeof labComponents === 'string') {
       useLabComponents.push(labComponents)
@@ -217,25 +218,38 @@ async function buildConfiguration(ctx: VuetifyNuxtContext) {
         config.labComponents.add(component)
       })
 
-      if (dateOptions && !config.labComponents.has('VDatePicker')) {
+      if (ctx.vuetify3_4 === false && dateOptions && !addDatePicker) {
         const entry = componentsToImport.get('VDatePicker')
         if (entry) {
           entry.push('VDatePicker')
           config.labComponents.add('VDatePicker')
+          addDatePicker = false
         }
       }
 
       componentsToImport.forEach((componentsArray, from) => {
         config.imports.push(`import {${componentsArray.join(',')}} from 'vuetify/labs/${from}'`)
       })
-      addDatePicker = !config.labComponents.has('VDatePicker')
     }
   }
 
   // include date picker only when needed
   if (dateOptions && addDatePicker) {
-    config.imports.push('import {VDatePicker} from \'vuetify/labs/VDatePicker\'')
-    config.labComponents.add('VDatePicker')
+    let warn = true
+    if (typeof ctx.vuetify3_4 === 'boolean') {
+      warn = false
+      if (ctx.vuetify3_4) {
+        // @ts-expect-error VDatePicker is on labs when version < 3.4
+        config.components.add('VDatePicker')
+        config.imports.push('import {VDatePicker} from \'vuetify/components/VDatePicker\'')
+      }
+      else {
+        config.labComponents.add('VDatePicker')
+        config.imports.push('import {VDatePicker} from \'vuetify/labs/VDatePicker\'')
+      }
+    }
+
+    warn && logger.warn('Unable to load Vuetify version from package.json, add VDatePicker to components or labComponents')
   }
 
   // components entry

src/vite/vuetify-date-configuration-plugin.ts

@@ -27,7 +27,9 @@ export function dateConfiguration() {
         const { adapter: _adapter, ...newDateOptions } = ctx.vuetifyOptions.date ?? {}
 
         const imports = ctx.dateAdapter === 'vuetify'
-          ? 'import { VuetifyDateAdapter } from \'vuetify/labs/date/adapters/vuetify\''
+          ? ctx.vuetify3_4 === true
+            ? ''
+            : 'import { VuetifyDateAdapter } from \'vuetify/labs/date/adapters/vuetify\''
           : ctx.dateAdapter === 'custom'
             ? ''
             : `import Adapter from '@date-io/${ctx.dateAdapter}'`
@@ -48,7 +50,7 @@ export function dateConfiguration() {
   }
 
   function buildAdapter() {
-    if (ctx.dateAdapter === 'custom')
+    if (ctx.dateAdapter === 'custom' || (ctx.dateAdapter === 'vuetify' && ctx.vuetify3_4 === true))
       return ''
 
     if (ctx.dateAdapter === 'vuetify')