<DevOnly>

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

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

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

app/pages/example.vue
<template>
  <div>
    <Sidebar />
    <DevOnly>
      <!-- 이 컴포넌트는 개발 중에만 렌더링됩니다 -->
      <LazyDebugBar />

      <!-- 프로덕션에서 대체 컴포넌트가 필요할 경우 -->
      <!-- `nuxt preview`를 사용해 반드시 테스트하세요 -->
      <template #fallback>
        <div><!-- flex.justify-between을 위한 비어 있는 div --></div>
      </template>
    </DevOnly>
  </div>
</template>

Slots

  • #fallback: 프로덕션에서 대체 컴포넌트가 필요할 경우.
<template>
  <div>
    <Sidebar />
    <DevOnly>
      <!-- 이 컴포넌트는 개발 중에만 렌더링됩니다 -->
      <LazyDebugBar />
      <!-- `nuxt preview`를 사용해 반드시 테스트하세요 -->
      <template #fallback>
        <div><!-- flex.justify-between을 위한 비어 있는 div --></div>
      </template>
    </DevOnly>
  </div>
</template>