Prismic ignores custom preview page

[rachel.g (Rachel Gould)]

My previews are working, but something seems fishy with the link-resolver settings.

If I use the default /preview link resolver URL and click to preview a content entry, the in-between page while it loads the preview is a weird version of our default Nuxt template.
If I add in a pages/preview.vue file that specifies different content and layout, it has no effect on that in-between "preview loading" page.

Here's the weird part:

If I change my settings in prismic so that the link-resolver is prismic-preview, and create a pages/prismic-preview.vue file that has the same content as the preview.vue file mentioned above, it uses my custom page. But this ONLY works if I DON'T add this to my nuxt.config:

  prismic: {
...
    preview: '/prismic-preview'
  },

In other words, without adding that line it is still defaulting to /preview in the Nuxt config. Yet it serves the correct prismic-preview route with my custom layout. It also statically compiles a /preview page, but AFAIK that isn't used anywhere..

What's happening here?

[Priyanka (Priyanka Maheshwari)]

Hello Rachel,

Welcome to the Prismic Forum and thanks for posting this question to us.

I understood your question and I tried this out on my own and experiencing the same behavior. I'm not sure what is happening here. I'm going to discuss this with my developer team and will update you on the matter.

Thanks,
Priyanka

[rachel.g (Rachel Gould)]

Hey Priyanka. It's been a while since your last reply. Have you guys found anything to help with this?

Thanks,
Rachel

[Priyanka (Priyanka Maheshwari)]

Hello Rachel,

Sorry for the delayed response. I'm discussing this with our dedicated developer. I'll come back to you ASAP.

Thanks,

Priyanka

[lihbr (Lucie)]

Hey Rachel, I'm really sorry for the delay, I hope you have found a workaround in the meantime!

From what I read in your original post the module was performing as expected, here are some highlights:

1. When using the Nuxt module it supplies a default preview resolving page automatically using that content: prismic-module/preview.vue at master · nuxt-community/prismic-module · GitHub I suspect it was this one showing up, indeed using the default layout your provided to Nuxt. While not being pretty it should work!
2. When adding ~/pages/preview.vue this gets your page to conflict with the preview page the module will create upon generation. I'm guessing the module ends up overriding the supplied page inside the pages directory.
3. Therefore when renaming it to prismic-preview.vue the conflict should be gone... until the module gets told to generate its preview page to /prismic-preview, and then basically we're back at step 2.

From your issue I'm understanding you want to create a custom preview resolving page, thankfully the module has an option for that! In order to do so you need to create a component here: ~/app/prismic/pages/preview.vue with at minimum this scaffolding:

<template>
  <p>Loading Prismic preview...</p>
</template>

<script>
export default {
  mounted() {
    this.$prismic.preview()
  }
}
</script>

It behaves just like a regular Nuxt page, so from here you should be able to add your styling, change its layout, and so on.

We noticed that indeed there was a misleading information about it on our official documentation and we fixed it. For reference here's the module's documentation about it: Previews - @nuxtjs/prismic

Let us know if anything is still unclear!