<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 は、子要素のいずれかが SSR でエラーをトリガーした場合にクライアント上でコンテンツをレンダリングする <NuxtClientFallback> コンポーネントを提供します。