Prismic Preview with Static Nuxt + Netlify not working

[grafik]

Hi there,

I'm having trouble getting the preview working with Prismic and a static Nuxt site deployed on Netlify.

Have read through the preview troubleshooting, and this forum (where I see a lot of preview not working posts).

My nuxt.config is setup like this:

export default {
    ssr: "true",
    loading: false,
    target: "static",
    generate: {
      fallback: "true",
    },
    plugins: ["~/plugins/vue-imgix.js"],
    
    components: true,
  
    buildModules: ["@nuxtjs/prismic", "@nuxtjs/dotenv"],
  
    modules: ["@nuxtjs/style-resources"],
  
    prismic: {
      endpoint: "https://reponame.prismic.io/api/v2",
      linkResolver: "@/plugins/link-resolver",
      preview: "/preview",
    },
  };

I'm using a link-resolver as follows:

export default function (doc) {
  if (doc.isBroken) {
    return "/error";
  }

  if (doc.type === "home_page") {
    return "/";
  }

  if (doc.type === "work_page") {
    return "/work/";
  }

  if (doc.type === "contact_page") {
    return "/contact/";
  }

  if (doc.type === "insights_page") {
    return "/insights/";
  }

  if (doc.type === "about_page") {
    return "/about/";
  }

  if (doc.type === "studio_page") {
    return "/studio/";
  }

  if (doc.type === "menu") {
    return "/";
  }

  if (doc.type === "social") {
    return "/";
  }

  if (doc.type === "category") {
    return "/";
  }

  if (doc.type === "page") {
    return "/page/" + doc.uid;
  }
  if (doc.type === "project") {
    return "/project/" + doc.uid;
  }

  if (doc.type === "article") {
    return "/insight/" + doc.uid;
  }

  return "/";
}

Here is how my setup is on the prismic end:

The io.prismic.preview cookie is added to the application with a value of:

{%22_tracker%22:%22tf9wCT0N%22%2C%22reponame.prismic.io%22:{%22preview%22:%22https://reponame.prismic.io/previews/YWcwhhQAACEAtWHi:YWcxkxQAACIAtWal?websitePreviewId=YWX2OxQAACEAsFfh%22}}

At the moment preview just redirects to the homepage everytime. ¯_(ツ)_/¯

Any tips as to what I am doing wrong would be great, as this is a feature I'd love for my clients to be able to use!

[Priyanka (Priyanka Maheshwari)]

Hello @grafik

Thanks for reaching out to us.

If you add the preview route as /preview, you need only to set up the preview environment inside your repository, as you already have done. You don't need to add any configuration and preview toolbar in the nuxt.config.js file. It's a built-in feature included in the @nuxtjs/prismic library.

Could you please remove preview: "/preview" from the nuxt.config.js file?

Give this a try, and let me know if it still doesn't work. I'd be happy to debug it.

Thanks,
Priyanka

[grafik]

Hi Priyanka, thanks, ok giving that a go — will report back

[grafik]

Hi Priyanka, that seems to do the trick, initially, I noticed that the project document was not previewing then I checked the link-resolver and realised that it should be named case_study.

A question in regards to the preview, do you have to click the close on the toolbar to remove the cookie/stop it previewing when you load the page again?

If anyone has a similar problem, this was my setup below to get the preview for a static site working on Netlify.

nuxt.config.js

    ssr: "true",
    loading: false,
    target: "static",
    generate: {
       fallback: "404.html",
    },
    prismic: {
      endpoint: "https://your-repo-name.prismic.io/api/v2",
      linkResolver: "@/plugins/link-resolver",
    },

Link-resolver.js (these must match your nuxt config document type API id's)

My setup:

export default function (doc) {
  if (doc.isBroken) {
    return "/error";
  }

  if (doc.type === "home_page") {
    return "/";
  }

  if (doc.type === "work_page") {
    return "/work/";
  }

  if (doc.type === "contact_page") {
    return "/contact/";
  }

  if (doc.type === "insights_page") {
    return "/insights/";
  }

  if (doc.type === "about_page") {
    return "/about/";
  }

  if (doc.type === "studio_page") {
    return "/studio/";
  }

  if (doc.type === "menu") {
    return "/";
  }

  if (doc.type === "social") {
    return "/";
  }

  if (doc.type === "category") {
    return "/";
  }

  if (doc.type === "page") {
    return "/page/" + doc.uid;
  }
  if (doc.type === "case_study") {
    return "/project/" + doc.uid;
  }

  if (doc.type === "article") {
    return "/insight/" + doc.uid;
  }

  if (doc.type === "preview") {
    return "/preview" + doc.uid;
  }

  return "/";
}

Make sure you have the @nuxtjs/prismic dependency added to your project (this way you do not have to include the prismic toolbar js file)

[Priyanka (Priyanka Maheshwari)]

Hello @grafik

I am glad that it's working for you.

@grafik

A question in regards to the preview, do you have to click the close on the toolbar to remove the cookie/stop it previewing when you load the page again?

Yes, When you're done previewing, click on the "X" in the preview toolbar to exit your preview session.

Don't hesitate to reach out to us if you have any questions.

Thanks,
Priyanka