Nuxt は <DevOnly> コンポーネントを提供しており、開発中のみコンポーネントをレンダリングします。

このコンテンツは本番ビルドには含まれません。

<template>
  <div>
    <Sidebar />
    <DevOnly>
      {/* このコンポーネントは開発中のみレンダリングされます */}
      <LazyDebugBar />

      {/* 本番環境で代替が必要な場合 */}
      {/* `nuxt preview` を使用してこれらをテストしてください */}
      <template #fallback>
        <div>{/* flex.justify-between 用の空の div */}</div>
      </template>
    </DevOnly>
  </div>
</template>

スロット

• #fallback: 本番環境で代替が必要な場合。

<template>
  <div>
    <Sidebar />
    <DevOnly>
      {/* このコンポーネントは開発中のみレンダリングされます */}
      <LazyDebugBar />
      {/* `nuxt preview` を使用してこれらをテストしてください */}
      <template #fallback>
        <div>{/* flex.justify-between 用の空の div */}</div>
      </template>
    </DevOnly>
  </div>
</template>