usePreviewMode

O modo de visualização permite que você veja como suas alterações seriam exibidas em um site ao vivo sem revelá-las aos usuários.

Você pode usar o composable embutido usePreviewMode para acessar e controlar o estado de visualização no Nuxt. Se o composable detectar o modo de visualização, ele forçará automaticamente quaisquer atualizações necessárias para useAsyncData e useFetch para re-renderizar o conteúdo de visualização.

const { enabled, state } = usePreviewMode()

Opções

Verificação personalizada de enable

Você pode especificar uma maneira personalizada de habilitar o modo de visualização. Por padrão, o composable usePreviewMode habilitará o modo de visualização se houver um parâmetro preview na URL que seja igual a true (por exemplo, http://localhost:3000?preview=true). Você pode envolver o usePreviewMode em um composable personalizado, para manter as opções consistentes em todos os usos e evitar quaisquer erros.

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

Modificar o estado padrão

usePreviewMode tentará armazenar o valor de um parâmetro token da URL no estado. Você pode modificar este estado e ele estará disponível para todas as chamadas de usePreviewMode.

const data1 = ref('data1')

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

Personalizar os callbacks onEnable e onDisable

Por padrão, quando usePreviewMode é habilitado, ele chamará refreshNuxtData() para buscar novamente todos os dados do servidor.

Quando o modo de visualização é desativado, o composable anexará um callback para chamar refreshNuxtData() para executar após uma navegação subsequente do roteador.

Você pode especificar callbacks personalizados a serem acionados fornecendo suas próprias funções para as opções onEnable e onDisable.

const { enabled, state } = usePreviewMode({
  onEnable: () => {
    console.log('o modo de visualização foi habilitado')
  },
  onDisable: () => {
    console.log('o modo de visualização foi desabilitado')
  }
})

Exemplo

O exemplo abaixo cria uma página onde parte de um conteúdo é renderizado apenas no modo de visualização.

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

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

<template>
  <div>
    Algum conteúdo base
    <p v-if="enabled">
      Apenas conteúdo de visualização: {{ state.token }}
      <br>
      <button @click="enabled = false">
        desativar modo de visualização
      </button>
    </p>
  </div>
</template>

Agora você pode gerar seu site e servi-lo:

npx nuxt generate
npx nuxt preview

Então você pode ver sua página de visualização adicionando o parâmetro de consulta preview ao final da página que deseja ver uma vez:

?preview=true