UI 交互类

函数	用途	客户端	SSR
useLoadingIndicator	页面加载指示器	✅	✅
usePreviewMode	预览模式控制	✅	✅
useAnnouncer	无障碍广播（v4.4+）	✅	✅

useLoadingIndicator

控制页面加载指示器，Nuxt 内置的加载状态管理。

const { isLoading, start, finish, clear } = useLoadingIndicator()

// isLoading: Ref<boolean>  是否正在加载
// start(): void            开始加载
// finish(): void           完成加载
// clear(): void             清除状态

自定义加载指示器

const { isLoading } = useLoadingIndicator()

watch(isLoading, (loading) => {
  if (loading) {
    NProgress.start()
  } else {
    NProgress.done()
  }
})

Nuxt 默认行为

路由切换时自动触发加载指示器。你可以通过 isLoading 自定义 UI 反馈（如顶部进度条、骨架屏等）。

在 app.vue 中配合 <NuxtLoadingIndicator> 使用

<template>
<NuxtLoadingIndicator />
<NuxtPage />
</template>

usePreviewMode

预览模式控制，用于在预览状态下展示未发布的内容。

const { enabled, state } = usePreviewMode({
  enabled: false,            // 是否启用预览模式
  state: { preview: true },  // 预览状态数据
})

预览模式的典型场景

• CMS 内容预览（如 Strapi、Contentful 的草稿预览）
• 管理后台预览未发布的页面
• A/B 测试预览

useAnnouncer（v4.4+）

无障碍广播，用于通知屏幕阅读器页面内容变化。

const { polite, assertive } = useAnnouncer()

// 礼貌通知（不打断当前朗读）
polite('新消息已加载')

// 强制通知（立即朗读）
assertive('错误：操作失败')

配合 <NuxtAnnouncer> 使用：

<!-- app.vue -->
<template>
  <NuxtAnnouncer />
  <NuxtPage />
</template>

适用场景

场景	推荐方式	说明
表单提交结果	polite()	不打断当前操作
搜索结果更新	polite()	提示结果已更新
动态内容加载	polite()	提示新内容已加载
严重错误	assertive()	立即通知用户
页面导航	自动处理	Nuxt 自动通知路由变化

无障碍（Accessibility）的重要性

屏幕阅读器用户无法"看到"页面变化，需要通过语音通知。useAnnouncer 让你的应用对残障用户更友好。