usePreviewMode

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

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

const { enabled, state } = usePreviewMode()

Options

Custom enable check

미리보기 모드를 활성화하는 사용자 정의 방식을 지정할 수 있습니다. 기본적으로 usePreviewMode 컴포저블은 URL에 preview 파라미터가 있고 그 값이 true인 경우(예: http://localhost:3000?preview=true) 미리보기 모드를 활성화합니다. usePreviewMode를 사용자 정의 컴포저블로 감싸서, 사용 전반에 걸쳐 옵션을 일관되게 유지하고 오류를 방지할 수 있습니다.

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

Modify default state

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

const data1 = ref('data1')

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

Customize the onEnable and onDisable callbacks

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

미리보기 모드가 비활성화되면, 컴포저블은 이후 라우터 내비게이션 후에 실행될 refreshNuxtData() 호출 콜백을 연결합니다.

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

const { enabled, state } = usePreviewMode({
  onEnable: () => {
    console.log('preview mode has been enabled')
  },
  onDisable: () => {
    console.log('preview mode has been disabled')
  },
})

Example

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

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

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

<template>
  <div>
    Some base content
    <p v-if="enabled">
      Only preview content: {{ state.token }}
      <br>
      <button @click="enabled = false">
        disable preview mode
      </button>
    </p>
  </div>
</template>

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

npx nuxt generate
npx nuxt preview

그런 다음, 한 번 보고 싶은 페이지 끝에 preview 쿼리 파라미터를 추가하여 미리보기 페이지를 볼 수 있습니다. 예: http://localhost:3000/?preview=true.