usePreviewMode

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

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

const { enabled, state } = usePreviewMode()

Опции

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

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

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

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

usePreviewMode попытается сохранить значение параметра token из URL-адреса в state. Вы можете изменить это состояние, и оно будет доступно для всех вызовов 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, например http://localhost:3000/?preview=true.