Document enablePreview

[mornir]

What problem does this feature solve?

• - Explain that enablePreview accepts data for override (e.g. draft data from a CMS)
• - Explain asyncData({$preview}) and this.$preview
• - Inform that enablePreview uses $nuxt.refresh under the hood. So basically what happens is a client side refresh.
• - Give a good example of usage (e.g. fetching draft data from CMS).
• - Inform that enablePreview should be tested locally with yarn serve and not yarn dev (I tested it, in dev mode enablePreview doesn't work as expected in the asyncData hook, which is normal)
• - Inform that enablePreview is only available in the context object of plugins
• - Inform that previews are handled client-side and thus the plugin should be run on the client preview.client.js

Existing sources:
https://github.com/nuxt/nuxt.js/blob/0337932115d4312130d266962d469620378af61c/packages/vue-app/template/index.js#L214
https://nuxtjs.org/blog/going-full-static/

I can submit a contribution to the docs, but I don't know exactly where I should publish it on nuxt.org. Under plugins?
I was thinking that I could also write a real-word example with Sanity CMS and publish it under https://nuxtjs.org/examples

[Atinux]

Hi @mornir

Thank you for the detailed issue, indeed we did not have the time to update the documentation yet because I want to release an example using the live preview for this feature.

It's on our roadmap :)

[mornir]

I was too excited about the release, couldn't wait to try the new preview mode out 😋
Looking forward to the example and the updated docs 😃
In the meantime I think I pretty much figured out how I can make it work with my stack.

[mornir]

With Nuxt new preview mode, how can we handle previews for unpublished pages? By unpublished pages, I mean pages for which no routes were generated yet. Opening a preview from the CMS for these pages results in a 404.

I was hoping that the Nuxt preview mode would let me get rid of the preview route I created exclusively for handling previews. So for now I think that I'm going to keep my current implementation, in pages/preview.vue: https://gist.github.com/mornir/ec2b631ffdb13205111a5244c3d3d881

[Atinux]

@mornir Actually we have the SPA fallback that can handle the 404 pages

[mornir]

@Atinux Hey! Thanks for the reply 😊

Oh! I didn't know that the SPA fallback would still call the API before showing the 404 page, like you explained here
nuxt/nuxt#7648 (comment)
This behavior should definitely be documented. But this is really great!

However, I was expecting Nuxt to not fall back to the 404 page when calling enablePreview .
Here's a reproduction:
In preview.client.js, I'm always calling enablePreview with some dummy data:
https://github.com/mornir/copywork-portfolio/blob/dev/plugins/preview.client.js

Visiting generated pages with the preview query parameter overrides the content as expected:
https://copywork.netlify.app/sanity-pricing-page/?preview=true

However, visiting pages that were not generated and don't exist on the API (usually draft content in CMS is not publicly available) results in a 404, even if the preview mode is activated:
https://copywork.netlify.app/random-url/?preview=true
Here I would also expect to see the preview data passed to enablePreview

[mornir]

UPDATE
It was actually the validate hook that was triggering the display of the 404 page!

The code snippet below solves the issue:

async validate({ app, params, $preview }) {
    if ($preview) {
      return true
    }

It would also great to add this gotcha to your live preview example 😁

[debs-obrien]

please check if in the the new docs this is explained correctly. thanks for your contributions

[mornir]

Thanks for the new docs. 😀
I finally took the time to try out the preview mode in depths. I wrote a short guide with the CMS Sanity on dev.to.
I'll make a pull request to the new docs with additional information that I think is useful.