usePreviewMode

Режим предпросмотра позволяет видеть, как изменения будут выглядеть на «боевом» сайте, не показывая их пользователям.

Встроенный композабл usePreviewMode даёт доступ к состоянию предпросмотра и управление им. При включённом режиме он принудительно обновляет данные useAsyncData и useFetch для перерисовки контента предпросмотра.

const { enabled, state } = usePreviewMode()

Опции

Своя проверка включения (enable)

Можно задать собственное условие включения режима. По умолчанию режим включается при наличии в URL параметра preview=true (например, http://localhost:3000?preview=true). Можно обернуть usePreviewMode в свой композабл для единообразия и избежания ошибок.

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

Изменение состояния по умолчанию

usePreviewMode сохраняет в state значение параметра token из URL. Состояние можно расширить через getState; оно будет доступно во всех вызовах usePreviewMode.

const data1 = ref('data1')

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

Колбэки onEnable и onDisable

По умолчанию при включении режима вызывается 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

Страницу предпросмотра можно открыть, добавив к URL параметр preview, например http://localhost:3000/?preview=true.