Nuxt3 dynamic [uid] page: Content loads entering a page, but not through a link

Developing with Prismic
1

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 and Prismic3.

app.vue

<template>
  <NuxtLayout>
    <NuxtPage/>
  </NuxtLayout>
</template>

layouts/default.vue

<template>
  <main>
    <Navigation />
    <slot />
    <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"
      }
    ]
  },

  css: ["~/assets/css/styles.scss"],

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

  prismic: {
    endpoint: 'themojoclinic'
  }
})
3

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.

4

Hello @tadas.majeris

I am glad that you figured it out. Let us k ow if you have any questions.

Thanks,
Priyanka