docs: update to @nuxt/content@next (#2379)

Co-authored-by: Farnabaz <farnabaz@gmail.com>

docs/app/components/Header.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { NavItem } from '@nuxt/content'
+import type { ContentNavigationItem } from '@nuxt/content'
 import type { NavigationMenuItem } from '@nuxt/ui'
 
 defineProps<{
@@ -8,7 +8,7 @@ defineProps<{
 
 const config = useRuntimeConfig().public
 
-const navigation = inject<Ref<NavItem[]>>('navigation')
+const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 
 // const items = computed(() => props.links.map(({ icon, ...link }) => link))
 

docs/app/components/content/ComponentCode.vue

@@ -43,6 +43,7 @@ const { $prettier } = useNuxtApp()
 
 const camelName = camelCase(props.slug ?? route.params.slug?.[route.params.slug.length - 1] ?? '')
 const name = `U${upperFirst(camelName)}`
+const component = defineAsyncComponent(() => import(`#ui/components/${upperFirst(camelName)}.vue`))
 
 const componentProps = reactive({ ...(props.props || {}) })
 const componentEvents = reactive({
@@ -268,12 +269,12 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
         </template>
       </div>
 
-      <div class="flex justify-center border border-b-0 border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)] relative p-4 z-[1]" :class="[!options.length && 'rounded-t-[calc(var(--ui-radius)*1.5)]', props.class]">
-        <component :is="name" v-bind="{ ...componentProps, ...componentEvents }">
+      <div v-if="component" class="flex justify-center border border-b-0 border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)] relative p-4 z-[1]" :class="[!options.length && 'rounded-t-[calc(var(--ui-radius)*1.5)]', props.class]">
+        <component :is="component" v-bind="{ ...componentProps, ...componentEvents }">
           <template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
-            <ContentSlot :name="slot" unwrap="p">
+            <MDCSlot :name="slot" unwrap="p">
               {{ slots?.[slot] }}
-            </ContentSlot>
+            </MDCSlot>
           </template>
         </component>
       </div>

docs/app/components/content/ComponentEmits.vue

@@ -24,9 +24,9 @@ const meta = await fetchComponentMeta(name as any)
     <ProseTbody>
       <ProseTr v-for="event in (meta?.meta?.events || [])" :key="event.name">
         <ProseTd>
-          <ProseCodeInline>
+          <ProseCode>
             {{ event.name }}
-          </ProseCodeInline>
+          </ProseCode>
         </ProseTd>
         <ProseTd>
           <HighlightInlineType v-if="event.type" :type="event.type" />

docs/app/components/content/ComponentProps.vue

@@ -87,9 +87,9 @@ const metaProps: ComputedRef<ComponentMeta['props']> = computed(() => {
     <ProseTbody>
       <ProseTr v-for="prop in metaProps" :key="prop.name">
         <ProseTd>
-          <ProseCodeInline>
+          <ProseCode>
             {{ prop.name }}
-          </ProseCodeInline>
+          </ProseCode>
         </ProseTd>
         <ProseTd>
           <HighlightInlineType v-if="prop.default" :type="prop.default" />

docs/app/components/content/ComponentSlots.vue

@@ -24,9 +24,9 @@ const meta = await fetchComponentMeta(name as any)
     <ProseTbody>
       <ProseTr v-for="slot in (meta?.meta?.slots || [])" :key="slot.name">
         <ProseTd>
-          <ProseCodeInline>
+          <ProseCode>
             {{ slot.name }}
-          </ProseCodeInline>
+          </ProseCode>
         </ProseTd>
         <ProseTd>
           <HighlightInlineType v-if="slot.type" :type="slot.type" />