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

fixes #15323
vuetifyjs · Nov 8, 2022 · bbe8cac · bbe8cac
1 parent 7a01467
commit bbe8cac
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 26 deletions.
diff --git a/packages/vuetify/src/components/VNoSsr/VNoSsr.tsx b/packages/vuetify/src/components/VNoSsr/VNoSsr.tsx
@@ -3,15 +3,12 @@ import { useHydration } from '@/composables/hydration'
 
 // Utilities
 import { defineComponent } from '@/util'
-import { ref } from 'vue'
 
 export const VNoSsr = defineComponent({
   name: 'VNoSsr',
 
   setup (_, { slots }) {
-    const show = ref(false)
-
-    useHydration(() => (show.value = true))
+    const show = useHydration()
 
     return () => show.value && slots.default?.()
   },

diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.tsx b/packages/vuetify/src/components/VOverlay/VOverlay.tsx
@@ -12,6 +12,7 @@ import { makeTransitionProps, MaybeTransition } from '@/composables/transition'
 import { useBackButton, useRouter } from '@/composables/router'
 import { useBackgroundColor } from '@/composables/color'
 import { useProxiedModel } from '@/composables/proxiedModel'
+import { useHydration } from '@/composables/hydration'
 import { useRtl } from '@/composables/locale'
 import { useStack } from '@/composables/stack'
 import { useTeleport } from '@/composables/teleport'
@@ -143,6 +144,7 @@ export const VOverlay = genericComponent<new () => {
     const { globalTop, localTop, stackStyles } = useStack(isActive, toRef(props, 'zIndex'))
     const { activatorEl, activatorRef, activatorEvents, contentEvents, scrimEvents } = useActivator(props, { isActive, isTop: localTop })
     const { dimensionStyles } = useDimension(props)
+    const isMounted = useHydration()
 
     watch(() => props.disabled, v => {
       if (v) isActive.value = false
@@ -237,7 +239,7 @@ export const VOverlay = genericComponent<new () => {
           }, toHandlers(activatorEvents.value), props.activatorProps),
         }) }
 
-        { IN_BROWSER && (
+        { isMounted.value && (
           <Teleport
             disabled={ !teleportTarget.value }
             to={ teleportTarget.value }
@@ -291,7 +293,7 @@ export const VOverlay = genericComponent<new () => {
               </div>
             )}
           </Teleport>
-        ) }
+        )}
       </>
     ))
 

diff --git a/packages/vuetify/src/components/VOverlay/locationStrategies.ts b/packages/vuetify/src/components/VOverlay/locationStrategies.ts
@@ -197,25 +197,23 @@ function connectedLocationStrategy (data: LocationStrategyData, props: StrategyP
   })
 
   let observe = false
-  if (IN_BROWSER) {
-    const observer = new ResizeObserver(() => {
-      if (observe) updateLocation()
-    })
+  const observer = new ResizeObserver(() => {
+    if (observe) updateLocation()
+  })
 
-    watch([data.activatorEl, data.contentEl], ([newActivatorEl, newContentEl], [oldActivatorEl, oldContentEl]) => {
-      if (oldActivatorEl) observer.unobserve(oldActivatorEl)
-      if (newActivatorEl) observer.observe(newActivatorEl)
+  watch([data.activatorEl, data.contentEl], ([newActivatorEl, newContentEl], [oldActivatorEl, oldContentEl]) => {
+    if (oldActivatorEl) observer.unobserve(oldActivatorEl)
+    if (newActivatorEl) observer.observe(newActivatorEl)
 
-      if (oldContentEl) observer.unobserve(oldContentEl)
-      if (newContentEl) observer.observe(newContentEl)
-    }, {
-      immediate: true,
-    })
+    if (oldContentEl) observer.unobserve(oldContentEl)
+    if (newContentEl) observer.observe(newContentEl)
+  }, {
+    immediate: true,
+  })
 
-    onScopeDispose(() => {
-      observer.disconnect()
-    })
-  }
+  onScopeDispose(() => {
+    observer.disconnect()
+  })
 
   // eslint-disable-next-line max-statements
   function updateLocation () {

diff --git a/packages/vuetify/src/composables/hydration.ts b/packages/vuetify/src/composables/hydration.ts
@@ -1,12 +1,18 @@
 // Utilities
 import { getCurrentInstance, IN_BROWSER } from '@/util'
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 
-export function useHydration (callback: () => void) {
-  if (!IN_BROWSER) return
+export function useHydration () {
+  if (!IN_BROWSER) return ref(false)
 
   const vm = getCurrentInstance('useHydration')
   const rootEl = vm?.root?.appContext?.app?._container
 
-  return rootEl?.__vue_app__ ? callback() : onMounted(callback)
+  const isMounted = ref(!!rootEl?.__vue_app__)
+
+  if (!isMounted.value) {
+    onMounted(() => isMounted.value = true)
+  }
+
+  return isMounted
 }