fix: add missing imports in client hints (#141)

* fix: add missing imports in client hints

* chore: prepare module before building docs

* chore: remove nuxt auto imports

Author: userquin

.nuxtrc

@@ -1,2 +1 @@
-imports.autoImport=true
 typescript.includeWorkspace=true

package.json

@@ -43,18 +43,18 @@
     "*.mjs"
   ],
   "scripts": {
-    "build": "pnpm dev:prepare && nuxt-module-build",
+    "prepack": "nuxt-module-build",
     "dev": "nuxi dev playground",
     "dev:multiple-json": "MULTIPLE_LANG_FILES=true nuxi dev playground",
-    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
-    "dev:prepare:multiple-json": "nuxt-module-build --stub && MULTIPLE_LANG_FILES=true nuxi prepare playground",
+    "dev:prepare": "nuxt-module-build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "dev:prepare:multiple-json": "nuxt-module-build --stub && nuxt-module-build prepare && MULTIPLE_LANG_FILES=true nuxi prepare playground",
     "dev:build": "nuxi build playground",
     "dev:generate": "nuxi generate playground",
     "dev:build:multiple-json": "MULTIPLE_LANG_FILES=true nuxi build playground",
     "dev:generate:multiple-json": "MULTIPLE_LANG_FILES=true nuxi generate playground",
     "dev:preview": "nuxi preview playground",
     "docs:dev": "pnpm -C docs run dev",
-    "docs:build": "pnpm dev:prepare && pnpm -C docs run build",
+    "docs:build": "nuxt-module-build prepare && pnpm -C docs run build",
     "docs:serve": "pnpm -C docs run serve",
     "lint": "eslint .",
     "lint:fix": "nr lint --fix",

src/runtime/plugins/config.ts

@@ -12,12 +12,14 @@ export async function configureVuetify() {
 
   const vuetify = createVuetify(vuetifyOptions)
 
+  // @ts-expect-error Vuetify using App<any> instead of App<Element>
   nuxtApp.vueApp.use(vuetify)
 
   nuxtApp.provide('vuetify', vuetify)
 
   await nuxtApp.hooks.callHook('vuetify:ready', vuetify)
 
+  // eslint-disable-next-line n/prefer-global/process
   if (process.client) {
     // eslint-disable-next-line no-console
     isDev && console.log('Vuetify 3 initialized', vuetify)

src/runtime/plugins/vuetify-client-hints.client.ts

@@ -69,8 +69,15 @@ export default defineNuxtPlugin((nuxtApp) => {
       }
 
       // update the theme
-      if (prefersColorScheme && prefersColorSchemeOptions)
-        vuetifyOptions.theme.defaultTheme = state.value.colorSchemeFromCookie ?? prefersColorSchemeOptions.defaultTheme
+      if (prefersColorScheme && prefersColorSchemeOptions) {
+        if (vuetifyOptions.theme === false) {
+          vuetifyOptions.theme = { defaultTheme: state.value.colorSchemeFromCookie ?? prefersColorSchemeOptions.defaultTheme }
+        }
+        else {
+          vuetifyOptions.theme = vuetifyOptions.theme ?? {}
+          vuetifyOptions.theme.defaultTheme = state.value.colorSchemeFromCookie ?? prefersColorSchemeOptions.defaultTheme
+        }
+      }
     })
 
     // update theme logic

src/runtime/plugins/vuetify-client-hints.server.ts

@@ -11,6 +11,7 @@ import {
   defineNuxtPlugin,
   useCookie,
   useNuxtApp,
+  useRequestEvent,
   useRequestHeaders,
   useState,
 } from '#imports'
@@ -64,12 +65,22 @@ export default defineNuxtPlugin((nuxtApp) => {
       : true
 
     // update theme from cookie
-    if (clientHintsRequest.colorSchemeFromCookie)
-      vuetifyOptions.theme.defaultTheme = clientHintsRequest.colorSchemeFromCookie
+    if (clientHintsRequest.colorSchemeFromCookie) {
+      if (vuetifyOptions.theme === false) {
+        vuetifyOptions.theme = { defaultTheme: clientHintsRequest.colorSchemeFromCookie }
+      }
+      else {
+        vuetifyOptions.theme ??= {}
+        vuetifyOptions.theme.defaultTheme = clientHintsRequest.colorSchemeFromCookie
+      }
+    }
 
     await nuxtApp.hooks.callHook('vuetify:ssr-client-hints', {
       vuetifyOptions,
-      ssrClientHintsConfiguration,
+      ssrClientHintsConfiguration: {
+        ...ssrClientHintsConfiguration,
+        enabled: true,
+      },
       ssrClientHints: state.value,
     })
   })

tsconfig.json

@@ -1,3 +1,3 @@
 {
-  "extends": "./playground/.nuxt/tsconfig.json"
+  "extends": "./.nuxt/tsconfig.json"
 }