<DevOnly> · Nuxt 组件

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

生产环境构建中将不包含该内容。

pages/example.vue

<template>
  <div>
    <Sidebar />
    <DevOnly>
      <!-- this component will only be rendered during development -->
      <LazyDebugBar />

      <!-- if you ever require to have a replacement during production -->
      <!-- be sure to test these using `nuxt preview` -->
      <template #fallback>
        <div><!-- empty div for flex.justify-between --></div>
      </template>
    </DevOnly>
  </div>
</template>

插槽

#fallback：如果您需要在生产环境中使用替换内容。

<template>
  <div>
    <Sidebar />
    <DevOnly>
      <!-- this component will only be rendered during development -->
      <LazyDebugBar />
      <!-- be sure to test these using `nuxt preview` -->
      <template #fallback>
        <div><!-- empty div for flex.justify-between --></div>
      </template>
    </DevOnly>
  </div>
</template>

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

Nuxt 提供了 <NuxtClientFallback> 组件，如果其任何子元素在 SSR 中触发错误，则在客户端渲染其内容。