You are browsing Nuxt 2 docs. Go to Nuxt 3 docs, or learn more about Nuxt 2 Long Term Support.

Translated page Contents of this page might be outdated.
Read the original page Improve translation of this page

Modo de Pré-visualização

Pré-visualização em direto do estático do destino com o modo de pré-visualização.

Com a Nuxt e a geração de sítio totalmente estático, podemos agora utilizar a pré-visualização em direto, que chamará a nossa interface de programação de aplicação ou o nosso sistema de gestão de conteúdo para que possamos ver as alterações em direto antes da implantação.

Disponível apenas quando se utiliza target:static

O modo de pré-visualização atualizará automaticamente os dados da página, uma vez que utiliza $nuxt.refresh e, por conseguinte, chama nuxtServerInit, asyncData e fetch no lado do cliente.

Para ativar a pré-visualização em direto, temos de adicionar a seguinte extensão:

plugins/preview.client.js
export default function ({ query, enablePreview }) {
  if (query.preview) {
    enablePreview()
  }
}
A enablePreview só está disponível no objeto de contexto das extensões. As pré-visualizações são tratadas do lado do cliente e portanto, a extensão deve ser executada no cliente: preview.client.js.
nuxt.config.js
export default {
  plugins: ['~/plugins/preview.client.js']
}

Depois de adicionarmos a extensão, podemos agora gerar o nosso sítio e servi-lo:

Yarn
yarn generate
yarn start
NPX
npx nuxt generate
npx nuxt start

Depois, podemos ver a nossa página de pré-visualização adicionando o parâmetro de consulta ao fim da página que queremos ver imediatamente:

?preview=true
A enablePreview deve ser testada localmente com yarn start e não com yarn dev.

Pré-visualizar páginas que ainda não foram geradas

Para as páginas que ainda não foram geradas, o retrocesso da aplicação de página única continuará a chamar a interface de programação de aplicação antes de mostrar a página 404, uma vez que estas páginas existem na interface de programação de aplicação, mas ainda não foram geradas.

Se tivermos definido uma função gatilho de validação, provavelmente teremos de a modificar para que não redirecione para a página 404 no modo de pré-visualização:

validate({ params, query }) {
  if (query.preview) {
    return true
  }
}

Passar Dados para enablePreview

Podemos passar dados para a função enablePreview. Estes dados estarão então disponíveis no auxiliar de contexto $preview e em this.$preview.

O Que Se Segue?