diff --git a/packages/vuetify/src/composables/display.ts b/packages/vuetify/src/composables/display.ts index 5ae485592f1..85e4facf03c 100644 --- a/packages/vuetify/src/composables/display.ts +++ b/packages/vuetify/src/composables/display.ts @@ -68,6 +68,9 @@ export interface DisplayInstance { platform: Ref thresholds: Ref + /** @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 index 402a2b5216b..2043b96df2e 100644 --- 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 index b57d1d1e2c7..8c877f24f36 100644 --- a/packages/vuetify/tsconfig.json +++ b/packages/vuetify/tsconfig.json @@ -16,6 +16,7 @@ "node", "vue-router" ] - } + }, + "stripInternal": true } }