如何在页面访问时默认显示Vuetify的v-overlay组件

问题分析 #

直接将overlay ref初始值设为true未生效，核心原因是组件挂载前Vuetify的v-overlay组件还未完成初始化，DOM也未完全渲染，导致无法正确触发显示逻辑。

解决方案 #

方案1：使用onMounted钩子延迟设置 #

在组件挂载完成后再将overlay设为true，确保Vuetify组件和DOM都已就绪：

<script setup>
import { ref, onMounted } from 'vue'

const overlay = ref(false)

onMounted(() => {
  overlay.value = true
})
</script>

<template>
  <!-- 父容器需设置定位，保证absolute相对于父元素生效 -->
  <div style="position: relative; min-height: 100vh;">
    <v-overlay v-model="overlay" absolute>
      <v-card>
        <v-card-text>页面加载时自动显示的内容</v-card-text>
      </v-card>
    </v-overlay>
  </div>
</template>

方案2：结合nextTick确保DOM更新完成 #

如果方案1仍未生效，可通过nextTick等待DOM完全更新后再设置：

<script setup>
import { ref, onMounted, nextTick } from 'vue'

const overlay = ref(false)

onMounted(async () => {
  await nextTick()
  overlay.value = true
})
</script>

额外注意事项 #

• 必须确保v-overlay的父元素设置了position: relative，否则absolute定位会相对于整个文档，可能导致overlay显示位置异常甚至不可见。
• 检查Nuxt3中Vuetify插件是否正确注册（需在nuxt.config.ts中完成配置），避免组件初始化异常。

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