<DevOnly>

Исходный код
Рендеринг компонентов только во время разработки с помощью компонента DevOnly.

Nuxt предоставляет компонент DevOnly для рендеринга компонента только во время разработки.

Содержимое не попадёт в сборку для продакшена.

pages/example.vue
<template>
  <div>
    <Sidebar />
    <DevOnly>
      <!-- этот компонент будет отображаться только во время разработки -->
      <LazyDebugBar />

      <!-- если вам когда-нибудь понадобится замена в продакшене -->
      <!-- обязательно протестируйте их с помощью `nuxt preview` -->
      <template #fallback>
        <div><!-- пустой div для flex.justify-between --></div>
      </template>
    </DevOnly>
  </div>
</template>

Слоты

  • #fallback: если вам когда-нибудь потребуется запасной вариант в сборке для продакшена.
<template>
  <div>
    <Sidebar />
    <DevOnly>
      <!-- этот компонент будет отображаться только во время разработки -->
      <LazyDebugBar />
      <!-- обязательно протестируйте их с помощью `nuxt preview` -->
      <template #fallback>
        <div><!-- пустой div для flex.justify-between --></div>
      </template>
    </DevOnly>
  </div>
</template>