Nuxt3 and Prismic: dynamic [uid] page - content loads entering a page, but not through a link

Question

If I come to a page by entering the url it loads the content, but if I go through a link on another page it doesn't - only shows the Navigation and Footer from default.vue layout. Not sure what I am doing wrong (or missing)?

live demo: https://themojoclinic.netlify.app/

Using Nuxt3 (3.0.0-rc.3) and Prismic3 (3.0.0-alpha.5).

layouts/default.vue

<template>
  <main>
    <Navigation />
    <NuxtPage/>
    <Footer />
  </main>
</template>

pages/[uid].vue

<script lang="ts" setup>
  import { components } from '~/slices';
  const uid = String(useRoute().params.uid);
  const { client } = usePrismic()

  const { data: cmsData } = await useAsyncData(uid, () => client.getByUID('page', uid))
  const page = cmsData && cmsData.value ? cmsData.value.data : {title: 'page not found'}
</script>

<template>
  <SliceZone v-if="page && page.slices" :slices="page.slices" :components="components" />
</template>

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  clientConfig: {
    routes: [
      {
        name: 'home',
        path: '/'
      },
      {
        type: "page",
        path: ":uid"
      }
    ]
  },

  modules: ['@nuxtjs/prismic', '@nuxtjs/style-resources', '@nuxtjs/critters'],
})

score 0 · Accepted Answer · answered Jun 23 '22 at 09:40

FOUND A SOLUTION!

had to wrap the SliceZone with a container!

<template>
  <main>
    <SliceZone :slices="page.slices" :components="components" />
  </main>
</template>

Even though Vue3 should work with multiple elements in a template, seems we still need a root element.

Nuxt3 and Prismic: dynamic [uid] page - content loads entering a page, but not through a link

1 Answers1