Nuxt3+Vuetify3启用SSR时，如何获取useDisplay()初始状态？

核心原因 #

SSR渲染阶段，服务器无法获取客户端屏幕尺寸、设备类型等信息，useDisplay()会返回Vuetify预设的初始值，直到客户端hydration完成后才会更新。

可行解决方案 #

1. 结合Nuxt客户端标识执行布局逻辑 #

利用process.client判断环境，确保依赖useDisplay()的逻辑仅在客户端执行：

<script setup>
import { useDisplay } from 'vuetify'
const display = useDisplay()

// 仅在客户端处理布局切换
if (process.client) {
  // 根据display的值调整布局，比如display.mobile、display.md等
}
</script>

2. 配置Vuetify SSR并添加防闪烁处理 #

• 在nuxt.config.ts中确保Vuetify的SSR配置正确，可预设断点阈值减少闪烁：

export default defineNuxtConfig({
  modules: ['@nuxtjs/vuetify'],
  vuetify: {
    ssr: true,
    display: {
      thresholds: {
        xs: 0,
        sm: 600,
        md: 960,
        lg: 1264,
        xl: 1904
      }
    }
  }
})

• 在根组件或布局中添加v-cloak指令隐藏未hydrated的内容：

<template>
  <v-app v-cloak>
    <!-- 应用内容 -->
  </v-app>
</template>

<style>
[v-cloak] {
  display: none;
}
</style>

3. 用<ClientOnly>包裹依赖客户端信息的组件 #

将需要useDisplay()的布局部分放在Nuxt的<ClientOnly>组件中，确保这部分仅在客户端渲染：

<template>
  <ClientOnly>
    <mobile-layout v-if="display.mobile" />
    <desktop-layout v-else />
  </ClientOnly>
</template>

<script setup>
import { useDisplay } from 'vuetify'
const display = useDisplay()
</script>

4. Cookie传递断点信息（进阶方案） #

客户端首次加载时将断点信息存入Cookie，服务器渲染时读取该值匹配布局：

• 客户端设置Cookie：

<script setup>
import { useDisplay } from 'vuetify'
const display = useDisplay()

onMounted(() => {
  document.cookie = `breakpoint=${display.name}; path=/`
})
</script>

• 服务器端读取Cookie并配置Vuetify：
  在plugins/vuetify.ts中调整：

import { createVuetify } from 'vuetify'

export default defineNuxtPlugin((nuxtApp) => {
  const cookies = useRequestHeaders(['cookie'])
  const breakpoint = cookies.cookie?.match(/breakpoint=([^;]+)/)?.[1] || 'lg'

  const vuetify = createVuetify({
    ssr: true,
    display: {
      defaultBreakpoint: breakpoint
    }
  })

  nuxtApp.vueApp.use(vuetify)
})

注意事项 #

• <ClientOnly>包裹的内容无法被SSR渲染，可能影响SEO，需根据页面需求选择。
• Cookie方案需处理Cookie不存在的情况，设置合理默认断点。
• v-cloak可有效避免客户端hydration前的布局闪烁。

内容的提问来源于stack exchange，提问作者tadvas