usePreviewMode

El modo de vista previa te permite ver cómo se mostrarían tus cambios en un sitio en vivo sin revelarlos a los usuarios.

Puedes usar el composable incorporado usePreviewMode para acceder y controlar el estado de vista previa en Nuxt. Si el composable detecta el modo de vista previa, forzará automáticamente cualquier actualización necesaria para useAsyncData y useFetch para volver a renderizar el contenido de vista previa.

const { enabled, state } = usePreviewMode()

Opciones

Verificación personalizada de enable

Puedes especificar una forma personalizada de habilitar el modo de vista previa. Por defecto, el composable usePreviewMode habilitará el modo de vista previa si hay un parámetro preview en la URL que sea igual a true (por ejemplo, http://localhost:3000?preview=true). Puedes envolver el usePreviewMode en un composable personalizado para mantener las opciones consistentes en todos los usos y prevenir errores.

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

Modificar el estado predeterminado

usePreviewMode intentará almacenar el valor de un parámetro token de la URL en el estado. Puedes modificar este estado y estará disponible para todas las llamadas a usePreviewMode.

const data1 = ref('data1')

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

Personalizar los callbacks onEnable y onDisable

Por defecto, cuando usePreviewMode está habilitado, llamará a refreshNuxtData() para volver a obtener todos los datos del servidor.

Cuando el modo de vista previa está deshabilitado, el composable adjuntará un callback para llamar a refreshNuxtData() para ejecutarse después de una navegación posterior del enrutador.

Puedes especificar callbacks personalizados para ser activados proporcionando tus propias funciones para las opciones onEnable y onDisable.

const { enabled, state } = usePreviewMode({
  onEnable: () => {
    console.log('el modo de vista previa ha sido habilitado')
  },
  onDisable: () => {
    console.log('el modo de vista previa ha sido deshabilitado')
  }
})

Ejemplo

El ejemplo a continuación crea una página donde parte de un contenido se renderiza solo en modo de vista previa.

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

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

<template>
  <div>
    Algún contenido base
    <p v-if="enabled">
      Solo contenido de vista previa: {{ state.token }}
      <br>
      <button @click="enabled = false">
        deshabilitar modo de vista previa
      </button>
    </p>
  </div>
</template>

Ahora puedes generar tu sitio y servirlo:

npx nuxt generate
npx nuxt preview

Luego puedes ver tu página de vista previa agregando el parámetro de consulta preview al final de la página que deseas ver una vez:

?preview=true