fix(VOverlay): don't render content in ssr

fixes #15323
vuetifyjs · Dec 13, 2022 · 59d214b · 59d214b
1 parent 7adbc22
commit 59d214b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 14 deletions.
diff --git a/packages/vuetify/src/composables/display.ts b/packages/vuetify/src/composables/display.ts
@@ -68,6 +68,9 @@ export interface DisplayInstance {
   platform: Ref<DisplayPlatform>
   thresholds: Ref<DisplayThresholds>
 
+  /** @internal */
+  ssr: boolean
+
   update (): void
 }
 
@@ -138,13 +141,13 @@ function getPlatform (): DisplayPlatform {
   }
 }
 
-export function createDisplay (options?: DisplayOptions, isHydrate?: boolean): DisplayInstance {
+export function createDisplay (options?: DisplayOptions, ssr?: boolean): DisplayInstance {
   const { thresholds, mobileBreakpoint } = parseDisplayOptions(options)
 
-  const height = ref(getClientHeight(isHydrate))
+  const height = ref(getClientHeight(ssr))
   const platform = getPlatform()
   const state = reactive({} as DisplayInstance)
-  const width = ref(getClientWidth(isHydrate))
+  const width = ref(getClientWidth(ssr))
 
   function update () {
     height.value = getClientHeight()
@@ -198,7 +201,7 @@ export function createDisplay (options?: DisplayOptions, isHydrate?: boolean): D
     window.addEventListener('resize', update, { passive: true })
   }
 
-  return { ...toRefs(state), update }
+  return { ...toRefs(state), update, ssr: !!ssr }
 }
 
 export function useDisplay () {

diff --git a/packages/vuetify/src/composables/hydration.ts b/packages/vuetify/src/composables/hydration.ts
@@ -1,18 +1,20 @@
 // Utilities
-import { getCurrentInstance, IN_BROWSER } from '@/util'
 import { onMounted, ref } from 'vue'
+import { IN_BROWSER } from '@/util'
+import { useDisplay } from '@/composables/display'
 
 export function useHydration () {
   if (!IN_BROWSER) return ref(false)
 
-  const vm = getCurrentInstance('useHydration')
-  const rootEl = vm?.root?.appContext?.app?._container
+  const { ssr } = useDisplay()
 
-  const isMounted = ref(!!rootEl?.__vue_app__)
-
-  if (!isMounted.value) {
-    onMounted(() => isMounted.value = true)
+  if (ssr) {
+    const isMounted = ref(false)
+    onMounted(() => {
+      isMounted.value = true
+    })
+    return isMounted
+  } else {
+    return ref(true)
   }
-
-  return isMounted
 }
diff --git a/packages/vuetify/tsconfig.json b/packages/vuetify/tsconfig.json
@@ -16,6 +16,7 @@
         "node",
         "vue-router"
       ]
-    }
+    },
+    "stripInternal": true
   }
 }