In website preview with nuxt and netlify

Developing with Prismic
1

Hello everyone,

I'm struggling to make the preview of the changes work on a statically deployed Nuxt.js project.

Here is some context:

  • I've started working from this template: GitHub - prismicio/nuxtjs-website
  • I've created a few pages and I am now setting up the Prismic repository for the writers.
  • I've deployed it statically with Netlify
  • From what I understand, the preview feature should work out of the box with nuxt.js, however, it doesn't in my case.
  • The preview works locally but not on the deployed build
  • The io.prismic.preview a cookie is present and holds the correct ref but the content still doesn't update.

I have seen the Troubleshooting Previews article but could not find a solution to my problem.

I suspect that the part that is relevant for me is the following extract

With server-side technologies i.e Nuxt.js / Next.js / Gatsby make sure you're getting and passing the req when doing your queries.

Example in Nuxt.js

async asyncData({ params, error, req }) { ...

The way I'm using it is slightly different (cf:arrow_down:). But it should not be the cause of the problem since $prismic removes the need for req :thinking:

async asyncData({ $prismic, params, error }) { ...

I'm also looking at the link resolver but I don't see why this would not work

I'm currently hard stuck on this and would appreciate all the help I can get :slight_smile: Thanks

1 Like
3

Hi Jeremy,

I’ll be happy to help.

You’re write in thinking that the new nuxt module handles previews out of the box. Also it seems the preview troubleshooting document is out of date in regards to this as the req is passed automatically now as you noticed, I’ll make a note to update this.

It sounds like you might be on the correct path with the link resolver.

Can you tell me if you added any other custom types to your repo than what came with the sample?

Also what is happening after you click the preview button, are you being directed to the correct page or the 404?

4

Hi Phil,

Thanks for your answer

  • Yes, I have added a bunch
  • When I click on the preview button, I get redirected to the correct page.
  • This makes me think that the link resolver is not the issue, but I might be wrong.
5

OK, is it going to the home page by any chance?

You will need to make sure you add all new custom types to the link resolver because the preview script uses this to parse the data. Can you tell me if this helps?

6

No it goes straight to the article’s page.

I have added all custom types that map to a page to my link resolver already. Should I add the others as well ? (ie: footer, menu) If so, I don’t really see how or why…

7

No, you don’t need to add your menu and footer to the link resolver.

Can you show me your nuxt.config file? You can send it to me as a private message if you don’t feel like sharing it publicly.

8

I have sent you my nuxt.config file in a private message as you suggested.

Thanks a lot for your help.

9

Great, I’ll check it out now.

10

I found someone with a similar issue. Can you tell me if you tell me if in your repo’s preview settings (/settings/previews/) you have the following in your toolbar script link?

?new=true
11

The only way I could replicate this was by using the old toolbar like which did have:

?new=true

Can you also try updating your @nuxt/prismic + nuxt dependencies.

12

@Phil

Yes, the toolbar script link does end with ?new=true.

I’ll update the dependencies tomorrow morning and keep you posted.

13

Hi Phil,

I just realized that I didn’t let you know that updating the dependencies did not help unfortunately.

Did you, by any chance, find anything on your side ?

14

So I saw a few things when checking out your project.

First I saw you removed the context from where we extend the vue:

build: {
        extend(config, ctx) {

In you repo where you add preview links, I saw that your were not directing towards the preview routes also with:
/preview

Also I noticed you were generating your own routes, can you help me understand what this was for? The module should generate these routes for you.

Hopefully we can figure this out.

15

  • I removed ctx because it was unused and eslint was throwing an error. For safe measure, I tried adding it back but it did not change anything.

  • I tried a bunch of times with and without the /preview in the repo. Still doesn’t work.

  • I wrote a script to generate the routes because the module did not do it for pages with no links pointing to it.

    • You can replicate this with the template so I don’t think this is specific to my project.
    • When running nuxt generate we get
      image
    • Remove the <header-prismic/> from both default.vue and homepage.vue layouts, and the routes are not generated anymore.
      image

I really hope we can figure this out as well :slightly_smiling_face: :

16

We pass ctx in the build as it allows us to access the req for the previews.

I saw that you based your project off of the multi page sample project that we created in Nuxt. I checked that sample and did a fresh deploy on Netlify and it generates the routes and the previews are working.

So this would suggest the issue here is in your project, specifically in the changes you made in changing the sample project. I spent a couple of hours looking at this yesterday and couldn’t figure where the issue is coming from.

So my suggestion is to start a fresh from the sample project and go step by step re-adding the changes that you made and deploying to see at what point either the routes stop being generated or the previews break. This way you can find what is causing the issue. My guess is that it’s all linked to the route generation.

Let me know how this goes.

Thanks.

1 Like
17

Hi @Phil ,

I did as you suggested and went back in time checking where the preview stopped working. I went back all the way to the initial commit and the preview was still not working. And then I found the source of the issue. :tada:

It was a typo in the nuxt.config.js file. :man_facepalming:

The prismic endpoint was written with a capital letter in it.
I had endpoint: "https://360Learning.cdn.prismic.io/api/v2" and I needed to have endpoint: "https://360learning.cdn.prismic.io/api/v2"

I am really sorry to have wasted so much of your time on such a basic mistake.

Thank you so much for everything. Without your help, I think I would have turned crazy a few days ago.

3 Likes
18

Deary me :exploding_head:

Ahhh the joys of working with code haha

Well at least we got there in the end, I’m now going to throw my computer over a hedge.

Let me know if you need anything else. I feel personally invested in this project now and we’ll be sure to make it a success :grin:

2 Likes
20

Thanks again :smile:

I’ll let you know if I hit another roadblock for sure.