usePreviewMode

미리보기 모드를 사용하면 사용자에게 변경 사항을 공개하지 않고도 라이브 사이트에서 변경 사항이 어떻게 표시될지를 확인할 수 있습니다.

내장된 usePreviewMode 컴포저블을 사용하여 Nuxt에서 미리보기 상태에 접근하고 제어할 수 있습니다. 컴포저블이 미리보기 모드를 감지하면 useAsyncData 및 useFetch의 미리보기 콘텐츠를 다시 렌더링하기 위해 필요한 모든 업데이트를 자동으로 강제합니다.

const { enabled, state } = usePreviewMode()

옵션

사용자 정의 enable 체크

미리보기 모드를 활성화하는 사용자 정의 방법을 지정할 수 있습니다. 기본적으로 usePreviewMode 컴포저블은 URL에 preview 파라미터가 true로 설정되어 있는 경우(예: http://localhost:3000?preview=true) 미리보기 모드를 활성화합니다. usePreviewMode를 사용자 정의 컴포저블로 감싸 사용하여 사용 간 일관성을 유지하고 오류를 방지할 수 있습니다.

export function useMyPreviewMode () {
  return usePreviewMode({
    shouldEnable: () => {
      return !!route.query.customPreview
    }
  });
}

기본 상태 수정

usePreviewMode는 URL에서 token 파라미터의 값을 상태에 저장하려고 시도합니다. 이 상태를 수정할 수 있으며, 이는 모든 usePreviewMode 호출에서 사용할 수 있습니다.

const data1 = ref('data1')

const { enabled, state } = usePreviewMode({
  getState: (currentState) => {
    return { data1, data2: 'data2' }
  }
})

onEnable 및 onDisable 콜백 사용자 정의

기본적으로 usePreviewMode가 활성화되면, 서버에서 모든 데이터를 다시 가져오기 위해 refreshNuxtData()를 호출합니다.

미리보기 모드가 비활성화되면, 컴포저블은 이후의 라우터 탐색 후에 실행될 refreshNuxtData()를 호출하는 콜백을 첨부합니다.

onEnable 및 onDisable 옵션에 대한 사용자 정의 함수를 제공하여 트리거될 사용자 정의 콜백을 지정할 수 있습니다.

const { enabled, state } = usePreviewMode({
  onEnable: () => {
    console.log('미리보기 모드가 활성화되었습니다')
  },
  onDisable: () => {
    console.log('미리보기 모드가 비활성화되었습니다')
  }
})

예제

아래 예제는 일부 콘텐츠가 미리보기 모드에서만 렌더링되는 페이지를 생성합니다.

<script setup>
const { enabled, state } = usePreviewMode()

const { data } = await useFetch('/api/preview', {
  query: {
    apiKey: state.token
  }
})
</script>

<template>
  <div>
    기본 콘텐츠
    <p v-if="enabled">
      미리보기 전용 콘텐츠: {{ state.token }}
      <br>
      <button @click="enabled = false">
        미리보기 모드 비활성화
      </button>
    </p>
  </div>
</template>

이제 사이트를 생성하고 제공할 수 있습니다:

npx nuxt generate
npx nuxt preview

그런 다음, 보고 싶은 페이지 끝에 쿼리 파라미터 preview를 추가하여 미리보기 페이지를 볼 수 있습니다:

?preview=true