Add: nuxt content v3

app/pages/index.vue

@@ -1,10 +1,14 @@
 <script lang="ts" setup>
 const { locale } = useI18n()
+
+const { data: page } = await useAsyncData(`/home/${locale.value}`, () => {
+  return queryCollection('main').path(`/home/${locale.value}`).first()
+})
 </script>
 
 <template>
   <main class="!max-w-none prose dark:prose-invert">
-    <ContentDoc :path="`/home/${locale}`" />
+    <ContentRenderer v-if="page" :value="page" />
     <HomeMap />
   </main>
 </template>

app/pages/portfolio/[slug].vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 const route = useRoute()
-const { data: post } = await useAsyncData(`portfolio:${route.params.slug}`, () => queryContent(`/portfolio/${route.params.slug}`).findOne())
+const { data: post } = await useAsyncData(`portfolio/${route.params.slug}`, () =>
+  queryCollection('portfolio').path(`/portfolio/${route.params.slug}`).first())
+
 const {
   data: postDB,
   refresh,
-} = await useAsyncData(`portfolio:${route.params.slug}:db`, () => $fetch(`/api/posts/${route.params.slug}`, { method: 'POST' }))
-
-const { locale, locales } = useI18n()
-const currentLocale = computed(() => locales.value.filter(l => l.code === locale.value)[0])
+} = await useAsyncData(`portfolio/${route.params.slug}/db`, () => $fetch(`/api/posts/${route.params.slug}`, { method: 'POST' }))
 
+const { locale } = useI18n()
 const { t } = useI18n({
   useScope: 'local',
 })
@@ -122,12 +122,10 @@ async function handleLike() {
       icon="i-ph-pencil-line-duotone"
     />
     <article class="mt-8">
-      <ContentRenderer :value="post">
-        <ContentRendererMarkdown
-          :value="post"
-          class="!max-w-none prose dark:prose-invert"
-        />
-      </ContentRenderer>
+      <ContentRenderer
+        :value="post"
+        class="!max-w-none prose dark:prose-invert"
+      />
       <UDivider
         class="my-16"
         icon="i-ph-hands-clapping-duotone"
@@ -188,6 +186,10 @@ async function handleLike() {
 .prose h4 a {
   @apply no-underline;
 }
+
+.katex-html {
+  display: none;
+}
 </style>
 
 <i18n lang="json">

app/pages/portfolio/index.vue

@@ -11,13 +11,10 @@ useSeoMeta({
 
 const tagFilter = ref<string | undefined>(undefined)
 
-const { data: writings, refresh } = await useAsyncData('all-portfolio', () => queryContent('/portfolio')
-  .sort({ publishedAt: -1 })
-  .where({
-    tags: { $contains: tagFilter.value },
-  })
-  .without('body')
-  .find())
+const { data: writings, refresh } = await useAsyncData('all-portfolio', () => queryCollection('portfolio')
+  .order('publishedAt', 'DESC')
+  .where('tags', 'LIKE', tagFilter.value ? `%${tagFilter.value}%` : '%')
+  .all())
 
 watch(tagFilter, async () => await refresh())
 
@@ -60,7 +57,7 @@ function updateTag(index: number) {
       <NuxtLink
         v-for="(writing, id) in writings"
         :key="id"
-        :to="writing._path"
+        :to="writing.path"
       >
         <li
           class=" h-full border p-4 shadow-sm border-neutral-200 rounded-md hover:border-neutral-500 dark:border-neutral-700 dark:hover:border-neutral-500  duration-300"

app/pages/uses.vue

@@ -8,7 +8,7 @@ useSeoMeta({
   description: t('description'),
 })
 
-const { data: items } = await useAsyncData('uses', () => queryContent('/uses').find())
+const { data: items } = await useAsyncData('uses', async () => await queryCollection('uses').all())
 
 const hardware = items.value!.filter(item => item.category === 'hardware')
 const software = items.value!.filter(item => item.category === 'software')

content.config.ts

@@ -0,0 +1,34 @@
+import { defineCollection, z } from '@nuxt/content'
+
+export const collections = {
+  main: defineCollection({
+    type: 'page',
+    source: 'home/*.md',
+  }),
+  portfolio: defineCollection({
+    type: 'page',
+    source: 'portfolio/*.md',
+    schema: z.object({
+      slug: z.string(),
+      title: z.string(),
+      description: z.string(),
+      publishedAt: z.date(),
+      readingTime: z.number(),
+      cover: z.string(),
+      tags: z.array(z.string()),
+    }),
+  }),
+  uses: defineCollection({
+    type: 'data',
+    source: 'uses/*.json',
+    schema: z.object({
+      name: z.string(),
+      description: z.object({
+        en: z.string(),
+        fr: z.string(),
+        es: z.string(),
+      }),
+      category: z.string(),
+    }),
+  }),
+}

content/portfolio/what-is-machine-learning.md

@@ -10,6 +10,15 @@ tags:
   - maths
 ---
 
+::UAlert
+---
+icon: i-ph-warning-duotone
+color: amber
+variant: soft
+title: The Latex format may be not well rendered in the article, please refresh the page if you encounter any issue.
+---
+::
+
 ## Introduction
 
 Machine Learning (ML) is a key discipline in artificial intelligence (AI), enabling systems to learn from data to make predictions or discover patterns. It is the driving force behind many modern innovations, from personalised recommendations to autonomous vehicles.

nuxt.config.ts

@@ -34,14 +34,18 @@ export default defineNuxtConfig({
 
   // Nuxt Content
   content: {
-    highlight: {
-      theme: 'github-dark',
-    },
-    markdown: {
-      remarkPlugins: ['remark-math'],
-      rehypePlugins: {
-        'rehype-katex': {
-          output: 'mathml',
+    build: {
+      markdown: {
+        highlight: {
+          theme: 'github-dark',
+        },
+        remarkPlugins: {
+          'remark-math': {},
+        },
+        rehypePlugins: {
+          'rehype-katex': {
+            output: 'mathml',
+          },
         },
       },
     },

package.json

@@ -13,7 +13,7 @@
     "db:generate": "drizzle-kit generate"
   },
   "dependencies": {
-    "@nuxt/content": "^2.13.4",
+    "@nuxt/content": "3.0.0-alpha.7",
     "@nuxt/image": "^1.8.1",
     "@nuxt/ui": "^2.18.5",
     "@nuxthq/studio": "^2.1.1",