Preview help for new pages on a static Nuxt.js site

[damien (Damien Ransome)]

We have a newly launched static Nuxt.js site and preview is working just fine for edits to existing pages.

Today we are trying to preview a new blog post before making it live, but:

• clicking the preview option from Prismic takes us to the wrong URL (it should be /blog/page but it takes us to /page)
• browsing to the correct page URL only displays the footer (no page content)
• manually URL hacking (rather than browsing the site) to the correct URL displays a standard 404 error page

Is it possible to preview content for an entirely new page on a statically generated Nuxt.js site, or do we have the wrong expectations about that in the first place?

Previewing an edit to an existing blog post works fine apart from the preview link takes us to the wrong URL originally; but URL hacking that to the correct URL shows the preview as expected.

[samlittlefair]

Hi Damien,

Welcome to the Prismic forum, and thanks for posting this question. I'd be happy to help debug this, but I'll need to see your whole project. Could you share it with me in a .zip file or a GitHub repo? (You can send it privately if you don't want to post it on the thread.)

Sam

[damien (Damien Ransome)]

Thanks Sam. I sent you a PM as requested.

[samlittlefair]

Thanks, Damien! I got your DM. I'll take a look and get back to you.

[samlittlefair]

Hey Damien,

Thanks for all the info, and sorry for my slow response. I downloaded your project and reproduced the error. One thing stood out to me:

On the "launch" blog post, it looks like the "author" field is empty, which produces an error when you try to use the author name on line 37 of ~/pages/blog/_uid.vue. I'm not sure if that's the source of the error you're seeing. If you remove that reference, does that help?

Sam

[damien (Damien Ransome)]

Thanks Sam - that helped move us a little further.

We populated the "author" on that blog post, and that has published fine now. Also the preview (for an unpublished post) now works if navigating to it, but when previewing directly it still takes us to domain.com/post-title instead of domain.com/blog/post-title

(and manually editing the URL doesn't work).

So, we can successfully publish content, and have a way to preview - but something is still not working 100% in terms of the preview. How do we get Prismic to take us to the right place / do we have something messed up in terms of routes on the Nuxt end for preview to work smoothly?

[samlittlefair]

Hey @damien,

Okay, try these three steps for the previews:

1. Configure your link-resolver

In your project files, it doesn't look like your link resolver (~/plugins/link-resolver.js) is configured for your blog posts. You'll want to add something like this:

  if (doc.type === 'blog_post') {
    return '/blog/' + doc.uid
  }

2. 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.

3. 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 if I can find anything else that might help. And, in any case, let me know if you have any other questions.

Best,
Sam

[damien (Damien Ransome)]

Hi Sam. Thanks, that was it. We adjusted the link resolver and it solved the problem. Thanks for the tips.

[samlittlefair]

Great! Let me know if you have any other questions