feat(content): Move toNuxt Content 3.1

Author: sfxcode

app/pages/cms/[...slug].vue

@@ -1,30 +1,22 @@
-<script setup lang='ts'>
+<script lang="ts" setup>
 const route = useRoute()
-const slug = route.params.slug?.toString()
+const path = route.path.replace('/cms', '')
+const { data: page } = await useAsyncData('page-' + path, () => {
+  return queryCollection('content').path(path).first()
+})
 </script>
 
 <template>
-  <div class="markdown">
-    <ContentDoc :path="slug">
-      <template #default="{ doc }">
-        <div class="card">
-          <h2>{{ doc.title }}</h2>
-          <p>{{ doc.description }}</p>
-          <p class="font-bold">
-            Author: {{ doc.author }}
-          </p>
-          <hr>
-          <ContentRenderer :value="doc" />
-        </div>
-      </template>
-      <!-- Slot if document is not found -->
-      <template #not-found>
-        <h1 class="text-2xl">
-          Content Page ({{ slug }}) not found
-        </h1>
-      </template>
-    </contentdoc>
-  </div>
-</template>
+  <div class="card">
+    <h2>{{ page?.title }}</h2>
+    <p>{{ page?.description }}</p>
+    <p class="font-bold">
+      Author: {{ page?.meta.author }}
+    </p>
+    <hr>
+
+    <ContentRenderer v-if="page" :value="page" />
 
-<style scoped></style>
+    <footer><!-- ... --></footer>
+  </div>
+</template>

app/pages/index.vue

@@ -34,7 +34,7 @@ import AdvertiseBox from '@/components/AdvertiseBox.vue'
       <AdvertiseBox header="Nuxt 3.14.x (Nuxt 4 ready)" icon="prime-check-circle" color="green-400">
         <ExternalLink href="https://nuxt.com/" text="Nuxt" /> with Pages, Layouts, ...
       </AdvertiseBox>
-      <AdvertiseBox header="Nuxt Content 2.13.x" icon="prime-check-circle" color="green-400">
+      <AdvertiseBox header="Nuxt Content 3.1.x" icon="prime-check-circle" color="green-400">
         <ExternalLink href="https://content.nuxt.com/" text="Content" />: Markdown, YML, CSV or JSON and MDC Syntax
       </AdvertiseBox>
       <AdvertiseBox header="Nuxt Modules" icon="prime-check-circle" color="green-600">

content.config.ts

@@ -0,0 +1,10 @@
+import { defineContentConfig, defineCollection } from '@nuxt/content'
+
+export default defineContentConfig({
+    collections: {
+        content: defineCollection({
+            type: 'page',
+            source: '**/*.md'
+        })
+    }
+})

nuxt.config.ts

@@ -35,10 +35,14 @@ export default defineNuxtConfig({
   ],
   content: {
     highlight: {
-      theme: 'one-dark-pro',
-      preload: ['json', 'js', 'ts', 'html', 'css', 'vue'],
-    },
-    // Options
+      theme: {
+        // Default theme (same as single string)
+        default: 'github-light',
+        // Theme used if `html.dark`
+        dark: 'github-dark',
+
+      }
+    }
   },
 
   i18n: {

package.json

@@ -25,7 +25,7 @@
     "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/prime": "^1.2.2",
     "@iconify-json/twemoji": "^1.2.2",
-    "@nuxt/content": "^2.13.4",
+    "@nuxt/content": "^3.1.0",
     "@nuxt/devtools": "2.0.0",
     "@nuxt/fonts": "^0.10.3",
     "@nuxt/image": "^1.9.0",