Document successor of preview mode

[pascalwengerter]

Describe the feature

I've not managed to find an equivalent for https://nuxtjs.org/docs/features/live-preview/ in the Nuxt3 codebase and am wondering if there's similar functionality/plans to add them/a successor (potentially in a module)?

Additional information

• Would you be willing to help implement this feature?
• Could this feature be implemented as a module?

Final checks

• Read the contribution guide.
• Check existing discussions and issues.

[cfab]

Any news on this ? is it going to happen ? using a headless CMS without preview functionality makes things really slow: you are force to redeploy the all site to see the result of any simple content change...

[JonathanDoelan]

I have figured out how to implement a Preview mode for SSG in Nuxt 3.
Have a look at #18407

[SebbeJohansson]

@danielroe could we get something more convenient to use than the suggestions in @JonathanDoelan's link? For example #18407 (comment) seems pretty complicated for "end-users". Im thinking that this could be something that we could use in useAsyncStoryblok to automatically fetch new data when in preview for https://github.com/storyblok/storyblok-nuxt.

[algora-pbc]

💎 $500 bounty created by @drewbaker
👉 To claim this bounty, submit your pull request on Algora
📝 Before proceeding, please make sure you can receive payouts in your country
💵 Payment arrives in your account 2-5 days after the bounty is rewarded
💯 You keep 100% of the bounty award
🙏 Thank you for contributing to nuxt/nuxt!

[drewbaker]

💎 $500 bounty created by @drewbaker
👉 To claim this bounty, submit your pull request on Algora
📝 Before proceeding, please make sure you can receive payouts in your country
💵 Payment arrives in your account 2-5 days after the bounty is rewarded
💯 You keep 100% of the bounty award
🙏 Thank you for contributing to nuxt/nuxt!

Obviously this is for the actual successor to enablePreview() and documentation, not just documentation of the above interim solutions.

[jwgatt]

/attempt #15639

[SebbeJohansson]

@jwgatt did you link the wrong thing? That just links to this issue :)

[jwgatt]

@jwgatt did you link the wrong thing? That just links to this issue :)

Isn't that how we declare that we are working on an issue with a bounty?

[SebbeJohansson]

@jwgatt maybe! Might be that I misunderstood.

[jwgatt]

So we want the same functionality as the enablePreview() method in Nuxt 2;

• Token-based preview
• Updating the URL
• Rendering preview content
• Disabling preview mode

Anymore that i've missed?

[drewbaker]

Updating the URL

What do you mean by that?

If you are curious, this is how we use the Nuxt2 enablePreview():
https://github.com/funkhaus/fuxt/blob/master/plugins/preview.client.js

The important thing is, that when enablePreview() is used, that the site runs in SPA mode... The entire point of it is to fetch real time fresh data from the CMS.

[jwgatt]

Apologies I meant 'Generate preview URL'.
Thanks for the link.

[danielroe]

A few quick thoughts. Apart from the feature set of Nuxt 2 preview mode, I'd add:

• Preview mode should be composable (so fully opt-in with no impact on bundle size or behaviour when not used)
• Provider aware (e.g. Vercel supports custom query string to bypass CDN cache) - might be worth integrating with nitro upstream on this one
• Possibly worth considering a full-stack implementation (e.g. a server utility to enable preview mode with Nitro session)

[formfcw]

If anyone needs a working solution right away, for me this approach works well.

[HawtinZeng]

hi, @drewbaker, I think @logotip4ik's work (#21705) is great, it worth $500 bounty.

[drewbaker]

hi, @drewbaker, I think @logotip4ik's work (#21705) is great, it worth $500 bounty.

Yeah I'm still waiting on this to be merged, it seems really solid!

[drewbaker]

@logotip4ik I paid this today, thanks so much!

[logotip4ik]

Huge thanks @drewbaker !