nuxt ui pro content navigation not showing up

<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content'

const route = useRoute()

// Fetch the current page content
const { data: page } = await useAsyncData(route.path, () =>
  queryCollection('content').path(route.path).first()
)
if (!page.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
}

// Content navigation
const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')

// Fetch the surrounding pages (prev/next)
const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
  return queryCollectionItemSurroundings('content', route.path, {
    fields: ['description'],
  })
})
</script>

<template>
  <UPage v-if="page" class="p-4">
    <UPageHeader :title="page.title" :description="page.description" />

    <template #left>
      <UPageAside>
        <UContentNavigation :navigation="navigation" highlight />
      </UPageAside>
    </template>

    <UPageBody>
      <ContentRenderer v-if="page.body" :value="page" />

      <USeparator v-if="surround?.filter(Boolean).length" />

      <!-- Prev/Next navigation -->
      <UContentSurround :surround="(surround as any)" />
    </UPageBody>

    <!-- Table of Contents in the right slot -->
    <template v-if="page?.body?.toc?.links?.length" #right>
      <UContentToc
        highlight
        highlight-color="primary"
        color="primary"
        :links="page?.body?.toc?.links"
      />
    </template>
  </UPage>
</template>

<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content'

const route = useRoute()

// Fetch the current page content
const { data: page } = await useAsyncData(route.path, () =>
  queryCollection('content').path(route.path).first()
)
if (!page.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
}

// Content navigation
const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')

// Fetch the surrounding pages (prev/next)
const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
  return queryCollectionItemSurroundings('content', route.path, {
    fields: ['description'],
  })
})
</script>

<template>
  <UPage v-if="page" class="p-4">
    <UPageHeader :title="page.title" :description="page.description" />

    <template #left>
      <UPageAside>
        <UContentNavigation :navigation="navigation" highlight />
      </UPageAside>
    </template>

    <UPageBody>
      <ContentRenderer v-if="page.body" :value="page" />

      <USeparator v-if="surround?.filter(Boolean).length" />

      <!-- Prev/Next navigation -->
      <UContentSurround :surround="(surround as any)" />
    </UPageBody>

    <!-- Table of Contents in the right slot -->
    <template v-if="page?.body?.toc?.links?.length" #right>
      <UContentToc
        highlight
        highlight-color="primary"
        color="primary"
        :links="page?.body?.toc?.links"
      />
    </template>
  </UPage>
</template>

import { defineContentConfig, defineCollection } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: 'page',
      source: '**/*.md',
    }),
  },
})

import { defineContentConfig, defineCollection } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: 'page',
      source: '**/*.md',
    }),
  },
})