<ClientOnly>

Source
<ClientOnly> 컴포넌트를 사용해 컴포넌트를 클라이언트 사이드에서만 렌더링합니다.

<ClientOnly> 컴포넌트는 의도적으로 컴포넌트를 클라이언트 사이드에서만 렌더링하기 위해 사용됩니다.

기본 슬롯의 내용은 서버 빌드에서 트리 셰이킹되어 제거됩니다. (이는 그 안의 컴포넌트에서 사용하는 CSS가 초기 HTML을 렌더링할 때 인라인되지 않을 수 있음을 의미합니다.)

Props

  • placeholderTag | fallbackTag: 서버 사이드에서 렌더링할 태그를 지정합니다.
  • placeholder | fallback: 서버 사이드에서 렌더링할 내용을 지정합니다.
<template>
  <div>
    <Sidebar />
    <!-- <Comment> 컴포넌트는 클라이언트 사이드에서만 렌더링됩니다 -->
    <ClientOnly
      fallback-tag="span"
      fallback="Loading comments..."
    >
      <Comment />
    </ClientOnly>
  </div>
</template>

Slots

  • #fallback: 서버에서 렌더링할 내용을 지정하며, <ClientOnly>가 브라우저에서 마운트될 때까지 표시됩니다.
app/pages/example.vue
<template>
  <div>
    <Sidebar />
    <!-- 이것은 서버 사이드에서 "span" 요소를 렌더링합니다 -->
    <ClientOnly fallback-tag="span">
      <!-- 이 컴포넌트는 클라이언트 사이드에서만 렌더링됩니다 -->
      <Comments />
      <template #fallback>
        <!-- 이것은 서버 사이드에서 렌더링됩니다 -->
        <p>Loading comments...</p>
      </template>
    </ClientOnly>
  </div>
</template>

Examples

Accessing HTML Elements

<ClientOnly> 내부의 컴포넌트는 마운트된 후에만 렌더링됩니다. DOM에서 렌더링된 요소에 접근하려면 템플릿 ref를 감시(watch)할 수 있습니다:

app/pages/example.vue
<script setup lang="ts">
const nuxtWelcomeRef = useTemplateRef('nuxtWelcomeRef')

// 컴포넌트가 사용 가능해지면 watch가 트리거됩니다
watch(nuxtWelcomeRef, () => {
  console.log('<NuxtWelcome /> mounted')
}, { once: true })
</script>

<template>
  <ClientOnly>
    <NuxtWelcome ref="nuxtWelcomeRef" />
  </ClientOnly>
</template>