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

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

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