<DevOnly> - Nuxt 组件 - Nuxt 中文文档

Nuxt 提供了 <DevOnly> 组件，用于仅在开发期间渲染组件。

内容不会包含在生产构建中。

pages/example.vue

<template>
  <div>
    <Sidebar />
    <DevOnly>
      <!-- 这个组件仅在开发期间被渲染 -->
      <LazyDebugBar />

      <!-- 如果你需要在生产期间有替换内容 -->
      <!-- 确保使用 `nuxt preview` 进行测试 -->
      <template #fallback>
        <div><!-- 空 div 用于 flex.justify-between --></div>
      </template>
    </DevOnly>
  </div>
</template>

插槽

#fallback: 如果你需要在生产期间有替换内容。

<template>
  <div>
    <Sidebar />
    <DevOnly>
      <!-- 这个组件仅在开发期间被渲染 -->
      <LazyDebugBar />
      <!-- 确保使用 `nuxt preview` 进行测试 -->
      <template #fallback>
        <div><!-- 空 div 用于 flex.justify-between --></div>
      </template>
    </DevOnly>
  </div>
</template>

仅在客户端渲染组件，使用 <ClientOnly> 组件。

Nuxt 提供了 <NuxtClientFallback> 组件，用于在客户端的任何子项触发 SSR 错误时渲染其内容