Migrate to nuxt content v3. Change articles layout.

components/article-listing.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { ParsedContent } from "@nuxt/content/dist/runtime/types";
+import { formatDate } from "@vueuse/core";
 
 interface Props {
-  article: ParsedContent;
+  article: any;
 }
 
 const { article } = defineProps<Props>();
@@ -10,8 +10,10 @@ const date = useDateFormat(article.date, "Do of MMMM YYYY");
 </script>
 
 <template>
-  <ULink class="font-semibold hover:underline" :to="article._path">{{
+  <ULink class="font-semibold hover:underline" :to="article.path">{{
     article.title
   }}</ULink>
-  <div class="text-xs text-slate-500">{{ date }}</div>
+  <div class="text-xs text-slate-500">
+    {{ date }}
+  </div>
 </template>

content.config.ts

@@ -0,0 +1,19 @@
+import { defineCollection, defineContentConfig, z } from "@nuxt/content";
+
+export default defineContentConfig({
+  collections: {
+    articles: defineCollection({
+      source: "articles/**/*.md",
+      type: "page",
+      schema: z.object({
+        title: z.string(),
+        date: z.date(),
+        coverImage: z.object({
+          author: z.string(),
+          authorUrl: z.string().url(),
+          url: z.string().url(),
+        }),
+      }),
+    }),
+  },
+});

nuxt.config.ts

@@ -12,7 +12,7 @@ export default defineNuxtConfig({
   ],
 
   content: {
-    markdown: {
+    renderer: {
       anchorLinks: false,
     },
   },

package.json

@@ -17,12 +17,12 @@
     "vue-router": "^4.2.5"
   },
   "dependencies": {
-    "@nuxt/content": "^2.9.0",
+    "@nuxt/content": "^3.3.0",
     "@nuxt/ui": "^2.11.0",
     "@nuxtjs/robots": "^3.0.0",
     "@vueuse/core": "^10.7.0",
-    "@vueuse/motion": "^2.0.0",
-    "@vueuse/nuxt": "^10.7.0",
+    "@vueuse/motion": "^3.0.3",
+    "@vueuse/nuxt": "^13.0.0",
     "sharp": "^0.33.0"
   }
 }

pages/articles/[...slug].vue

@@ -6,53 +6,71 @@ definePageMeta({
 });
 
 const { path } = useRoute();
+
+const { data: article } = useAsyncData(path, async () => {
+  const article = await queryCollection("articles").path(path).first();
+
+  return article;
+});
 </script>
 
 <template>
-  <ContentDoc :path="path" v-slot="{ doc }">
-    <UContainer
-      v-motion-fade
-      class="flex flex-col gap-3 prose dark:prose-invert"
-      as="article"
-    >
-      <div class="text-sm text-slate-500">
-        {{ formatDate(new Date(doc.date), "Do of MMMM YYYY") }}
-      </div>
-      <h1>{{ doc.title }}</h1>
-    </UContainer>
+  <UContainer
+    v-motion-fade
+    class="flex flex-col gap-3 prose dark:prose-invert"
+    as="article"
+  >
+    <div class="text-sm text-slate-500">
+      {{ formatDate(new Date(article.date), "Do of MMMM YYYY") }}
+    </div>
+    <h1>{{ article.title }}</h1>
+  </UContainer>
 
-    <UContainer
-      class="hidden md:block"
-      as="figure"
-      v-if="doc.coverImage?.url"
-      v-motion-fade
-      :delay="500"
+  <UContainer
+    class="hidden md:block"
+    as="figure"
+    v-if="article.coverImage?.url"
+    v-motion-fade
+    :delay="500"
+  >
+    <NuxtImg
+      placeholder
+      :src="article.coverImage?.url ?? ''"
+      :alt="article.title"
+      height="1000"
+      width="1700"
+      class="rounded-lg"
+    />
+    <ULink
+      :to="article.coverImage.authorUrl"
+      target="_blank"
+      class="text-xs text-slate-500 italic font-serif hover:underline"
     >
-      <NuxtImg
-        placeholder
-        :src="doc.coverImage.url ?? ''"
-        :alt="doc.title"
-        height="1000"
-        width="1700"
-        class="rounded-lg"
-      />
-      <ULink
-        :to="doc.coverImage.authorUrl"
-        target="_blank"
-        class="text-xs text-slate-500 italic font-serif hover:underline"
-      >
-        Photo by {{ doc.coverImage.author }}
-      </ULink>
-    </UContainer>
-    <UContainer
-      v-motion-fade
-      :delay="500"
-      class="flex flex-col gap-3 prose dark:prose-invert !pt-0"
-      as="article"
-    >
-      <ContentRenderer :value="doc" />
-    </UContainer>
-  </ContentDoc>
+      Photo by {{ article.coverImage.author }}
+    </ULink>
+  </UContainer>
+
+  <UContainer
+    v-motion-fade
+    :delay="500"
+    class="flex flex-col gap-3 prose dark:prose-invert !pt-0"
+    as="article"
+  >
+    <ContentRenderer :value="article" />
+  </UContainer>
 
   <Footer v-motion-fade :delay="500" />
 </template>
+
+<style scoped>
+article.prose {
+  h2 {
+    font-weight: bold !important;
+
+    a {
+      font-weight: bold !important;
+    }
+  }
+}
+</style>
+s

pages/articles/index.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
+import { formatDate } from "@vueuse/core";
+
 definePageMeta({
   layout: "content",
 });
+
+const articles = useAsyncData("articles", async () => {
+  return queryCollection("articles").order("date", "DESC").all();
+});
 </script>
 
 <template>
@@ -9,19 +15,30 @@ definePageMeta({
     <h1>Articles</h1>
   </UContainer>
 
-  <UContainer
-    v-motion-fade
-    :delay="500"
-    class="flex flex-col md:gap-10 gap-5 !pt-0"
-  >
-    <ContentList :query="{ sort: [{ date: -1 }] }" v-slot="{ list }">
-      <div v-for="article in list" :key="article._path">
-        <ArticleListing
-          :article="article"
-          v-if="article._path?.startsWith('/articles')"
+  <UContainer v-motion-fade :delay="500" class="grid grid-cols-12 gap-8">
+    <UCard class="col-span-6" v-for="article in articles.data.value">
+      <div class="grid gap-4">
+        <NuxtImg
+          class="rounded rounded-lg cursor-pointer"
+          :src="article.coverImage.url"
+          @click="navigateTo(article.path)"
         />
+        <div class="w-full">
+          <NuxtLink :to="article.path" class="font-semibold">{{
+            article.title
+          }}</NuxtLink>
+          <div class="text-sm text-slate-500">
+            {{ formatDate(new Date(article.date), "Do of MMMM YYYY") }}
+          </div>
+        </div>
+
+        <div>
+          <UButton variant="soft" color="gray" :to="article.path"
+            >Read article</UButton
+          >
+        </div>
       </div>
-    </ContentList>
+    </UCard>
   </UContainer>
 
   <Footer v-motion-fade :delay="500" />