API: <client-only> 컴포넌트

이 컴포넌트는 클라이언트에서만 렌더링 할 목적으로 사용됩니다. 클라이언트에서만 컴포넌트를 불러오기 위해서는 해당 컴포넌트를 client-side only plugin에 등록하세요

Warning: Nuxt < v2.9.0에서는 <client-only> 대신에 <no-ssr>을 사용하세요.

Props:

  • placeholder: string
    • <client-only />가 클라이언트 사이드에서 마운트 되기 전까지 텍스트를 placeholder로 사용합니다.
<template>
  <div>
    <sidebar />
    <client-only placeholder="Loading...">
      <!-- 이 컴포넌트는 클라이언트에서만 렌더링 됩니다 -->
      <comments />
    </client-only>
  </div>
</template>

Slots:

  • placeholder:

    • <client-only />가 클라이언트 사이드에서 마운트 되기 전까지 slot을 placeholder로 사용합니다.
    <template>
    <div>
      <sidebar />
      <client-only>
        <!-- 이 컴포넌트는 클라이언트에서만 렌더링 됩니다 -->
        <comments />
    
        <!-- 서버사이드에서 렌더링되는 로딩 인디케이터 -->
         <comments-placeholder slot="placeholder" />
      </client-only>
    </div>
    </template>

이 컴포넌트는 egoist/vue-client-only로부터 import되었습니다. Thanks @egoist!

잘못된 부분이 있거나 이 문서에 기여하고 싶으신가요? GitHub에서 이 페이지를 수정해주세요!

Platinum Sponsors

Storyblok Support Us