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

const data1 = ref('data1')

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

Customize the onEnable and onDisable callbacks

By default, when usePreviewMode is enabled, it will call refreshNuxtData() to re-fetch all data from the server.

When preview mode is disabled, the composable will attach a callback to call refreshNuxtData() to run after a subsequent router navigation.

You can specify custom callbacks to be triggered by providing your own functions for the onEnable and onDisable options.

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

Example

When preview mode is disabled, the composable will attach a callback to call refreshNuxtData() to run after a subsequent router navigation.

You can specify custom callbacks to be triggered by providing your own functions for the onEnable and onDisable options.

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

Пример

В приведенном ниже примере создается страница, на которой часть содержимого рендерится только в режиме предварительного просмотра.

<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 nuxi generate
npx nuxi preview

Затем вы можете увидеть страницу предварительного просмотра, добавив параметр запроса preview в конец страницы, которую вы хотите просмотреть один раз:

?preview=true