Nuxt mid-level certification launch date announced!
Рендеринг компонентов только во время разработки с помощью компонента 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>