Nuxt 3 - Prismic preview not working with SSG

Developing with Prismic
1

I have a minimal setup of a single page site build with Nuxt 3 that I am trying to preview. I use @nuxtjs/prismic module.
I run npm run generate , then on prismic, after configuring a preview endpoint, try to preview my draft content on the generated pages. I have configured link-resolver.js (for the example it always returns /) . But I always see the old content. The prismic popin is present, but the content is not updated.

It works well when I use the development environment (before SSG).

My nuxt.config.js file looks like this :

export default defineNuxtConfig({
  modules: ['@nuxtjs/prismic'],
  prismic: {
    endpoint: 'myprismicendpoint',
    linkResolver: '~/link-resolver.js',
  },
})

And my single plage :

<script setup>
const { client } = usePrismic()

const { data: home } = await useAsyncData('homepage', () =>
  client.getSingle('homepage')
)
</script>

<template>
  <div>
    <span>{{ home.data.title }}</span>
  </div>
</template>
1 Like
3

Hello @arthur.muchir

Thanks for reaching out to us.

To debug it, I need more information from you:

1.Make sure previews are configured correctly in Prismic

In Dashboard > Settings > Previews, make sure that all of your previews are properly configured, with /preview added for the Link Resolver.

2. Delete your preview cookie

On your website (localhost or production), open Dev Tools, go to the "Application" tab and click "Cookies" in the side menu. Click on the domain (localhost:8000 or your production domain), and scroll to find any domains that include io.prismic.preview. Delete all of those.

Finally, refresh everything and try opening a preview from the writing room again.

Let me know if that helps. If not, I can do some more digging to see. For this, I need your repo name and project code. You can send it via a private message.

Thanks,
Priyanka

4

Hello @Priyanka, thanks for your feedback.

My preview route is correctly configured and I deleted all my cookies without success.

Here is a minimal project : https://stackblitz.com/edit/github-srs7pp?file=nuxt.config.ts

If I download and install this, then run npm run generate and npm run preview (to serve static content for demo purpose on port 3000), preview prismic does not work anymore (it does when running npm run dev)

5
  1. Can you try, in your nuxt config file, to add :
target: "static",
  1. Then at the end of the file, add this fallback:
  generate: {
    fallback: "404.html" 
  }
  1. I believe you also need to add these:
endpoint: 'https://your-repo-name.cdn.prismic.io/api/v2',
preview: '/preview',

Hopefully, these changes should help.

6

It seems these options are not available anymore in Nuxt 3.

BTW, if I quote Nuxt 3 doc :

Static site generation (SSG) with ssr: true pre-renders routes of your application at build time. (This is the default behaviour when running nuxi generate .)

I just try to force this option but still get the same result.

For prismic endpoint I already have it under the prismic key in the nuxt config. I just added the preview property but still not getting preview to work :frowning:

7

Hello @arthur.muchir

Sorry for the late response. I was out of the office.

I am not sure why Preview is not working. To debug it deeply, I need your Prismic repo and the code. You can share this information in a private message.

Thanks,
Priyanka

8

Is there anymore information on this topic. We are facing the same issue.

9

Hello @jeroen2 Can you share a minimal reproduction with us?

10

For my own case it finally works (it has been fixed) : Prismic preview not working with SSG · Issue #191 · nuxt-modules/prismic · GitHub

1 Like