Wrong preview link from Prismic with Nuxt

Developing with Prismic
1

Hi!

I have a problem with the preview functionality in my app.

I’ve made a repeatable type for “Page” to create all my pages. In my nuxt app I dont want the url to be

mysite.com/page/about-us

but just this:

mysite.com/about-us

  • so in my menu component I'm using just the UID for the url so it’s just getting that information. Like this:

    {{ $prismic.asText(menuLink.link_label) }}

But when I use the preview button in Prismic it tries to go to mysite.com/page/about-us because of the repeatable type "page", which doesn’t exist on my domain then. Any ideas on how to either make the preview point to the correct page?

2

Hello @daniel.hult, welcome to the community forum!

It appears that there is something missing in your configuration. Maybe in the Link Resolver. There are three steps to set up Previews in a NuxtJS project:

1. Include the Prismic Toolbar javascript file

2. Setup a preview environment

3. Add a Link Resolver endpoint

Check if this thee elements are correctly set up and try to see if it works.

3

Don’t you just create a ~/src/pages/_uid.vue file which picks up all the pages? I don’t know why the /page/ part is getting put in your paths.

4

Thanks for the replies.

You can find all the code here for the repo:

The /page/ is coming from Prismic when I created the repeatable type “page”.

5

Hey Daniel,

You just need to remove /page/ from your linkresolver

So it would be:

if (doc.type === 'page') {
  return `/${doc.uid}`
}
6

Ahh, yes! That was it.

Thank you so much :slight_smile:

1 Like