feat: migrate to Content v3 (#209)

Author: antfu

.github/workflows/nuxthub.yml

@@ -3,7 +3,7 @@ on: push
 
 jobs:
   deploy:
-    name: "Deploy to NuxtHub"
+    name: Deploy to NuxtHub
     runs-on: ubuntu-latest
     environment:
       name: ${{ github.ref == 'refs/heads/main' && 'production' || 'preview' }}
@@ -22,7 +22,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 22
-          cache: 'pnpm'
+          cache: pnpm
 
       - name: Install dependencies
         run: pnpm install

components/ContentNavCard.vue

@@ -4,7 +4,7 @@ defineProps<{
   icon?: string
   title?: string
   subheader: string
-  description: string
+  description?: string
 }>()
 </script>
 
@@ -19,7 +19,7 @@ defineProps<{
     <div class="my-0 text-lg font-semibold">
       {{ title }}
     </div>
-    <div class="line-clamp line-clamp-2 mb-0 mt-1 text-[14px] op50">
+    <div v-if="description" class="line-clamp line-clamp-2 mb-0 mt-1 text-[14px] op50">
       {{ description }}
       <slot />
     </div>

components/ContentNavItem.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import type { NavItem } from '@nuxt/content'
+import type { ContentNavigationItem } from '@nuxt/content'
 
 const props = withDefaults(
   defineProps<{
-    item: NavItem
+    item: ContentNavigationItem
     level?: number
   }>(),
   {
     level: 0,
   },
 )
 
+const route = useRoute()
 const ui = useUiState()
 
 const resolved = computed(() => {
@@ -25,7 +26,7 @@ const paddingLeft = computed(() => `${0.5 + props.level * 0.8}rem`)
 <template>
   <div class="content-nav-item">
     <template v-if="resolved.children?.length">
-      <details :open="$route.path.includes(resolved._path)">
+      <details :open="route.path.includes(resolved.path)">
         <summary>
           <div
             flex="~ gap-1 items-center" cursor-pointer select-none px1 py0.5
@@ -41,18 +42,20 @@ const paddingLeft = computed(() => `${0.5 + props.level * 0.8}rem`)
         </summary>
         <div v-if="resolved.children?.length">
           <ContentNavItem
-            v-for="child in resolved.children"
-            :key="child.url" :item="child" :level="props.level + 1"
+            v-for="child of resolved.children"
+            :key="child.path"
+            :item="child"
+            :level="props.level + 1"
           />
         </div>
       </details>
     </template>
     <NuxtLink
       v-else
-      :to="resolved._path"
+      :to="resolved.path"
       px1 py0.5
       :style="{ paddingLeft }"
-      :class="{ 'text-primary bg-active': resolved._path === $route.path }"
+      :class="{ 'text-primary bg-active': resolved.path === route.path }"
       flex="~ gap-1 items-center"
       hover="text-primary bg-active "
       @click="ui.isContentDropdownShown = false"

components/MainPlayground.vue

@@ -43,6 +43,8 @@ const terminalPaneProps = computed(() => {
   }
 })
 
+const route = useRoute()
+
 // For panes size initialization on SSR
 const isMounted = useMounted()
 const panelInitDocs = computed(() => isMounted.value || {
@@ -73,7 +75,7 @@ const panelInitTerminal = computed(() => isMounted.value || {
       :size="ui.panelDocs" min-size="10"
       :style="panelInitDocs"
     >
-      <PanelDocs />
+      <PanelDocs :key="route.path" />
     </Pane>
     <PaneSplitter />
     <Pane

components/PanelDocs.vue

@@ -1,39 +1,46 @@
 <script setup lang="ts">
-import type { NavItem, ParsedContent } from '@nuxt/content'
+import type { ContentNavigationItem } from '@nuxt/content'
 
 const runtime = useRuntimeConfig()
-const {
-  navigation,
-  page,
-  next,
-  prev,
-} = useContent() as {
-  navigation: Ref<NavItem[]>
-  page: Ref<ParsedContent>
-  next: Ref<ParsedContent | undefined>
-  prev: Ref<ParsedContent | undefined>
-}
+const route = useRoute()
+const { data: page } = useAsyncData(route.path, () => {
+  return queryCollection('tutorials').path(route.path).first()
+})
+const { data: navigation } = useAsyncData(`navigation`, () => {
+  return queryCollectionNavigation('tutorials')
+})
+const { data: surroundings } = useAsyncData(`${route.path}-surroundings`, () => {
+  return queryCollectionItemSurroundings('tutorials', route.path, {
+    fields: ['title', 'description'],
+  })
+})
+
+const prev = computed(() => surroundings.value?.[0])
+const next = computed(() => surroundings.value?.[1])
 
 interface BreadcrumbItem {
   title: string
   path?: string
 }
 
-function findNavItemFromPath(path: string, items = navigation.value): NavItem | undefined {
-  const item = items.find(i => i._path === path)
+function findNavItemFromPath(
+  path: string,
+  items: ContentNavigationItem[] | null = navigation.value,
+): ContentNavigationItem | undefined {
+  const item = items?.find(i => i.path === path)
   if (item)
     return item
 
   const parts = path.split('/').filter(Boolean)
   for (let i = parts.length - 1; i > 0; i--) {
     const parentPath = `/${parts.slice(0, i).join('/')}`
-    const parent = items.find(i => i._path === parentPath)
+    const parent = items?.find(i => i.path === parentPath)
     if (parent)
       return findNavItemFromPath(path, parent.children || [])
   }
 }
 
-const contentPath = computed(() => page.value?._path as string | undefined)
+const contentPath = computed(() => page.value?.path as string | undefined)
 const breadcrumbs = computed(() => {
   const parts = contentPath.value?.split('/').filter(Boolean) || []
   const breadcrumbs = parts
@@ -58,8 +65,8 @@ const breadcrumbs = computed(() => {
 const ui = useUiState()
 
 const sourceUrl = computed(() =>
-  page.value?._file
-    ? `${runtime.public.repoUrl}/edit/main/content/${page.value._file}`
+  page.value?.id
+    ? `${runtime.public.repoUrl}/edit/main/content/${page.value.id}`
     : undefined,
 )
 
@@ -94,24 +101,24 @@ router.beforeEach(() => {
     </div>
     <div relative h-full of-hidden>
       <article ref="docsEl" class="max-w-none prose" h-full of-auto p6>
-        <ContentDoc />
+        <ContentRenderer v-if="page" :key="page.id" :value="page" />
         <div mt8 py2 grid="~ cols-[1fr_1fr] gap-4">
           <div>
             <ContentNavCard
               v-if="prev"
-              :to="prev._path"
+              :to="prev.path"
               :title="prev.title"
-              :description="prev.description"
+              :description="prev.description as string"
               subheader="Previous section"
               icon="i-ph-arrow-left"
             />
           </div>
           <div>
             <ContentNavCard
               v-if="next"
-              :to="next._path"
+              :to="next.path"
               :title="next.title"
-              :description="next.description"
+              :description="next.description as string"
               subheader="Next section"
               icon="i-ph-arrow-right"
               items-end text-right
@@ -140,7 +147,7 @@ router.beforeEach(() => {
           absolute left-0 right-0 top-0 max-h-60vh py2
           backdrop-blur-10 bg-base important-bg-opacity-80
         >
-          <ContentNavItem v-for="item of navigation" :key="item.url" :item="item" />
+          <ContentNavItem v-for="item of navigation" :key="item.path" :item="item" />
         </div>
       </Transition>
     </div>

content.config.ts

@@ -0,0 +1,13 @@
+import { defineCollection, defineContentConfig } from '@nuxt/content'
+
+export default defineContentConfig({
+  collections: {
+    tutorials: defineCollection({
+      type: 'page',
+      source: {
+        include: '**',
+        exclude: ['**/.template/**'],
+      },
+    }),
+  },
+})

eslint.config.js

@@ -7,4 +7,10 @@ export default antfu(
     formatters: true,
   },
   nuxt(),
+  {
+    files: ['**/template/files/**'],
+    rules: {
+      'no-console': 'off',
+    },
+  },
 )

nuxt.config.ts

@@ -4,13 +4,12 @@ export default defineNuxtConfig({
   modules: [
     '@vueuse/nuxt',
     '@unocss/nuxt',
+    '@nuxtjs/seo',
     '@nuxt/content',
     '@nuxt/image',
     '@nuxtjs/color-mode',
     '@pinia/nuxt',
     'floating-vue/nuxt',
-    '@nuxtjs/seo',
-    // '@nuxt/icon',
     '@nuxt/eslint',
 
     // local
@@ -32,27 +31,26 @@ export default defineNuxtConfig({
     },
   },
   site: {
-    url: 'https://learn-dev.nuxt.com',
+    url: 'https://learn.nuxt.com',
   },
   colorMode: {
     classSuffix: '',
   },
+
   content: {
-    documentDriven: true,
-    highlight: {
-      theme: {
-        default: 'vitesse-light',
-        dark: 'vitesse-dark',
+    build: {
+      markdown: {
+        rehypePlugins: {
+          'rehype-external-links': {},
+        },
+        highlight: {
+          theme: {
+            default: 'vitesse-light',
+            dark: 'vitesse-dark',
+          },
+        },
       },
     },
-    markdown: {
-      rehypePlugins: [
-        'rehype-external-links',
-      ],
-    },
-    experimental: {
-      search: {},
-    },
   },
 
   runtimeConfig: {