Preview Mode not working anymore ion step "1st Approach: Full Static with Preview Mode"

[codeflorist]

In the step "1st Approach: Full Static with Preview Mode" of the tutorial Create a Preview Environment for Your Nuxt 3 Website, the following method is used to refetch-the draft version of the useAsyncData in [...slug].vue:

nuxtApp.hook('page:finish', () => { refreshNuxtData() });

This does not seem to be working anymore in the newer Nuxt versions. The solution is originally from this discussion, where the original author also states in a comment in May 2023, that the solution is not working anymore.

Possible solutions:

1. I think the problem would be easily solvable by adding the version to the useAsyncData key in [...slug].vue. So using ${locale.value}-${version}-${url} instead of ${locale.value}-${url}. Because then Nuxt has to refetch the draft version on the client in edior mode, since the version variable is different from the server-generated one.

2. Investigating Nuxt's relatively new composable usePreviewMode for this would probably be a good (maybe best) solution. It has also been suggested by another user in this issue of the storyblok-nuxt package.

3. The author of the obsolete solution also points to this as an alternative, but imho this is unnecessarily complicated.