Prismic Preview Implementation in Nuxt project

Developing with Prismic
1

Hi Team,

We've project using technology stack - Nuxt JS, Prismic using @nuxtjs/apollo, I've done Preview settings in our Prismic Repo and of course have added 'prismic.js' in head section, but when I try to see preview I'm getting 'Page Not Found' error.

Because there is a route '/preview' in url and as per my understanding the script prismic provides (to inject in head section) handle this route and then preview are shown.

But in my case, I'm getting Page Not Found (404) error.

Any helps would be highly appreciated.

Thanks in advance!

3

Hi,

I'll be very happy to help you with this. Although I've never implemented previews with @nuxtjs/apollo, I'll still be willing to check it out.

Since you're hitting the 404 page, it sounds like maybe you haven't included the preview script in the head of the 404 page as well. We discuss this and more possible preview issues here:

If that doesn't work I'll be happy to check this out for you, if you can forward me the github to your project I'll check it out. (You can do this in a private message if you wish.)

Thanks.

4

Thanks Phil for your reply.
I went through the Troubleshooting User Guide from top to bottom and found that :-

  1. Preview Script is loading on every page and prismic toolbar is displaying at the bottom of the page
  2. cookie name & value - 'io.prismic.previewSession': 'YBjjwxUAACMAgLz0~YBjj_xUAACQAgL4A'

Are the above points are correct for the prismic preview implementation?

I'm further looking the user guide for troubleshooting

5

Hi Nehal,

The preview token is not the full token, it needs to resemble this:

https%3A%2F%2Freponame.prismic.io%2Fpreviews%2FXbr_VhAAACMAEdNJ%3AXbr-nBAAACMAEc-_%3FwebsitePreviewId%3DXanozRIAABXZ-ihY&documentId=XbApbxAAACYAP1DJ

(With everything.)

6

Hi @Phil,

I'm getting 404 page even though, I am loading "https://static.cdn.prismic.io/prismic.js?new=true&repo=snooze-discovery" every page in our application.

As I mentioned above my cookie name key and name is different as mentioned in user guide, so kindly let me know what I missing here.

Thanks!

7

Hi again Nehal,

If you can zip up your project and send it to me in a private message I'll be happy to look at this for you.

10

Hi Nehal,

I had a look and I think I might know what the issue is. Normally the @nuxt/prismic module automatically builds a /preview route in the pages directory for you, but since you're not using the module there is no corresponding route which should re-direct your application to the correct page on which to load the preview cookie.

You can see in our javascript documentation how to build a /preview route to handle the preview cookie:
https://prismic.io/docs/technologies/previews-and-the-prismic-toolbar-javascript#3.-resolving-the-preview-route-in-your-project

Let me know if this helps.

Thanks.

12

A post was split to a new topic: Preview failing on Netlify