Modo de Pré-visualização

Pré-visualização ao vivo para alvo estático com o modo de pré-visualização

Com o Nuxt e completamente estático você pode agora usar a pré-visualização ao vivo fora da caixa que chamará sua API ou CMS, assim você pode visualizar as mudanças ao vivo antes de desdobrar.

Disponível apenas quando estiver usando target:static

O modo de pré-visualização irá atualizar os dados da página automaticamente visto que ele usa $nuxt.refresh nos bastidores e portanto chama nuxtServerInit, asyncDate e fetch no lado do cliente.

No sentido de ativar a pré-visualização ao vivo você precisará adicionar o seguinte plugin:

plugins/preview.client.js

export default function ({ query, enablePreview }) {
  if (query.preview) {
    enablePreview()
  }
}

O enablePreview está disponível apenas dentro do objeto de contexto dos plugins. Pré-visualizações são manipuladas no lado do cliente e desta maneira o plugin deve ser executado no cliente: preview.client.js

nuxt.config.js

export default {
  plugins: ['~/plugins/preview.client.js']
}

Uma vez que você adicionou o plugin você pode agora gerar seu site e servir ele.

Yarn

yarn generate
yarn start

NPX

npx nuxt generate
npx nuxt start

Em seguida você pode visualizar sua página de pré-visualização ao adicionar o parâmetro de consulta no final da página que você queira visualizar imediatamente:

?preview=true

O enablePreview deve ser testado localmente com o yarn start e não yarn dev

Pré-visualizando Páginas Que Ainda Não Foram Geradas

Para páginas que ainda não foram geradas, mesmo na queda do SPA elas ainda continuarão a chamar a API antes de exibir a página 404 como se essas páginas existissem na API mas que ainda não foram geradas.

Se você tiver definido um gatilho validate, você provavelmente precisará modificar ele, assim para que ele não redirecione para a página 404 no modo de pré-visualização.

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

Passando Dados ao enablePreview

Você pode passar dados para função enablePreview. Esses dados irão depois estar disponíveis no auxiliar de contexto $preview e no this.$preview.