chore: set vuetify ssr to true

vuetifyjs · Jul 21, 2024 · 60ad800 · 60ad800
1 parent de7ba44
commit 60ad800
Showing 1 changed file with 48 additions and 47 deletions.
diff --git a/src/runtime/plugins/vuetify-client-hints.client.ts b/src/runtime/plugins/vuetify-client-hints.client.ts
@@ -60,57 +60,58 @@ const plugin: Plugin<{
         window.location.reload()
     }
 
-    if (viewportSize || (prefersColorScheme && prefersColorSchemeOptions)) {
-      // restore SSR state
-      nuxtApp.hook('vuetify:before-create', ({ vuetifyOptions }) => {
-        // on client, we update the display to avoid hydration mismatch on page refresh
-        // there will be some hydration mismatch since the headers sent by the user agent may not be accurate
-        if (viewportSize) {
-          const clientWidth = state.value.viewportWidth
-          const clientHeight = state.value.viewportHeight
-          vuetifyOptions.ssr = typeof clientWidth === 'number'
-            ? {
-                clientWidth,
-                clientHeight,
-              }
-            : true
-        }
-
-        // update the theme
-        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
-          }
-        }
-      })
+    // restore SSR state
+    nuxtApp.hook('vuetify:before-create', ({ vuetifyOptions }) => {
+      // on client, we update the display to avoid hydration mismatch on page refresh
+      // there will be some hydration mismatch since the headers sent by the user agent may not be accurate
+      if (viewportSize) {
+        const clientWidth = state.value.viewportWidth
+        const clientHeight = state.value.viewportHeight
+        vuetifyOptions.ssr = typeof clientWidth === 'number'
+          ? {
+              clientWidth,
+              clientHeight,
+            }
+          : true
+      }
+      else {
+        vuetifyOptions.ssr = true
+      }
 
-      // update theme logic
+      // update the theme
       if (prefersColorScheme && prefersColorSchemeOptions) {
-        const themeCookie = state.value.colorSchemeCookie
-        if (themeCookie) {
-          nuxtApp.hook('app:beforeMount', () => {
-            const vuetify = useNuxtApp().$vuetify
-            // update the theme
-            const cookieName = prefersColorSchemeOptions.cookieName
-            const parseCookieName = `${cookieName}=`
-            const cookieEntry = `${parseCookieName}${state.value.colorSchemeFromCookie ?? prefersColorSchemeOptions.defaultTheme};`
-            watch(vuetify.theme.global.name, (newThemeName) => {
-              document.cookie = themeCookie.replace(cookieEntry, `${cookieName}=${newThemeName};`)
-            })
-            if (prefersColorSchemeOptions.useBrowserThemeOnly) {
-              const { darkThemeName, lightThemeName } = prefersColorSchemeOptions
-              const prefersDark = window.matchMedia('(prefers-color-scheme: dark)')
-              prefersDark.addEventListener('change', (e) => {
-                vuetify.theme.global.name.value = e.matches ? darkThemeName : lightThemeName
-              })
-            }
-          })
+        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
+    if (prefersColorScheme && prefersColorSchemeOptions) {
+      const themeCookie = state.value.colorSchemeCookie
+      if (themeCookie) {
+        nuxtApp.hook('app:beforeMount', () => {
+          const vuetify = useNuxtApp().$vuetify
+          // update the theme
+          const cookieName = prefersColorSchemeOptions.cookieName
+          const parseCookieName = `${cookieName}=`
+          const cookieEntry = `${parseCookieName}${state.value.colorSchemeFromCookie ?? prefersColorSchemeOptions.defaultTheme};`
+          watch(vuetify.theme.global.name, (newThemeName) => {
+            document.cookie = themeCookie.replace(cookieEntry, `${cookieName}=${newThemeName};`)
+          })
+          if (prefersColorSchemeOptions.useBrowserThemeOnly) {
+            const { darkThemeName, lightThemeName } = prefersColorSchemeOptions
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)')
+            prefersDark.addEventListener('change', (e) => {
+              vuetify.theme.global.name.value = e.matches ? darkThemeName : lightThemeName
+            })
+          }
+        })
+      }
     }
 
     return {