Nuxt proporciona el componente <DevOnly> para renderizar un componente solo durante el desarrollo.

El contenido no se incluirá en las compilaciones de producción.

<template>
  <div>
    <Sidebar />
    <DevOnly>
      {/* este componente solo se renderizará durante el desarrollo */}
      <LazyDebugBar />

      {/* si alguna vez necesitas tener un reemplazo durante la producción */}
      {/* asegúrate de probar estos usando `nuxt preview` */}
      <template #fallback>
        <div>{/* div vacío para flex.justify-between */}</div>
      </template>
    </DevOnly>
  </div>
</template>

Slots

• #fallback: si alguna vez necesitas tener un reemplazo durante la producción.

<template>
  <div>
    <Sidebar />
    <DevOnly>
      {/* este componente solo se renderizará durante el desarrollo */}
      <LazyDebugBar />
      {/* asegúrate de probar estos usando `nuxt preview` */}
      <template #fallback>
        <div>{/* div vacío para flex.justify-between */}</div>
      </template>
    </DevOnly>
  </div>
</template>