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')