<DevOnly>

<DevOnly> 컴포넌트를 사용하여 개발 중에만 컴포넌트를 렌더링합니다.

Nuxt는 개발 중에만 컴포넌트를 렌더링하기 위해 <DevOnly> 컴포넌트를 제공합니다.

이 내용은 프로덕션 빌드에는 포함되지 않습니다.

pages/example.vue

<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>