O Nuxt fornece o componente <DevOnly> para renderizar um componente apenas durante o desenvolvimento.

O conteúdo não será incluído nas compilações de produção.

<template>
  <div>
    <Sidebar />
    <DevOnly>
      {/* este componente será renderizado apenas durante o desenvolvimento */}
      <LazyDebugBar />

      {/* se você precisar de um substituto durante a produção */}
      {/* certifique-se de testá-los usando `nuxt preview` */}
      <template #fallback>
        <div>{/* div vazia para flex.justify-between */}</div>
      </template>
    </DevOnly>
  </div>
</template>

Slots

• #fallback: se você precisar de um substituto durante a produção.

<template>
  <div>
    <Sidebar />
    <DevOnly>
      {/* este componente será renderizado apenas durante o desenvolvimento */}
      <LazyDebugBar />
      {/* certifique-se de testá-los usando `nuxt preview` */}
      <template #fallback>
        <div>{/* div vazia para flex.justify-between */}</div>
      </template>
    </DevOnly>
  </div>
</template>