Nuxt 3 preview always show index instead of the correct page

Developing with Prismic
1

I've set up previews on a Nuxt 3 project with slicemachine. This works fine for index, but if I preview any other page it always shows the index. The site is hosted on Netlify, which is where the preview points to.

These are the settings i'm using in nuxt.config.ts:

  prismic: {
    endpoint: repositoryName,
    clientConfig: {
      routes: [
        {
          type: 'index',
          uid: 'index',
          path: '/',
        },
        {
          type: 'page',
          path: '/:uid/'
        }
      ]
    }
  },

And my package.json in case it's relevant:

  "devDependencies": {
    "@nuxt/eslint-config": "^0.1.1",
    "@nuxtjs/prismic": "^3.0.2",
    "@slicemachine/adapter-nuxt": "^0.3.17",
    "@types/node": "^18",
    "concurrently": "^8.1.0",
    "eslint": "^8.42.0",
    "nuxt": "^3.7.3",
    "nuxt-svgo": "^3.5.3",
    "slice-machine-ui": "^1.14.1"
  },
  "dependencies": {
    "schema-dts": "^1.1.2"
  }

Any pointers on how to get previews working correctly ?

3

Hi Johan,

Can you try editing your route to:

  {
    type: "page",
    path: "/:uid",
  },
4

I've removed the trailing slash, but it still shows the index.

Edit:

I might as well include the code snippet that fetches the page data.
I suspect this could be the culprit, since it fetches all page documents, that might cause this issue, but that's just a guess.

import { components } from '~/slices';
import { Content } from "@prismicio/client";

const prismic = usePrismic();
const route = useRoute();
const response = await useAsyncData(route.params.uid as string, () => 
    prismic.client.getAllByType('page', {
    fetchLinks: [
      'questionanswer.items'
    ]
  })
);

const pages = response.data as Ref<Content.PageDocument<string>[]>
let page: Content.PageDocument<string> | null = null;

for(let i = 0; i < pages.value.length; i++) {
    if(pages.value[i].uid === route.params.uid) {
        page = pages.value[i];
    }
}

if(!page) {
    console.error('Pagina niet gevonden')
    throw createError({
        message: 'Pagina niet gevonden',
        statusCode: 404,
        fatal: true
    })
}
5

It could be, but I'm not sure.

Do you have at least one published version of your page type?

7

Yes, i've got a few published of that type (page).

8

Have you checked out our troubleshooting doc?

9

I've changed the preview path to /preview at the prismic dashboard and that fixed it.
I assumed it pointed there by default.

Anyway, it's fixed, thanks for the help Phil :grinning:

1 Like