feat: switch from nuxt/content to unplug-vue-markdown

Author: jonathanyeong

app/components/BlogPostWrapper.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { BlogPostFrontmatter } from '#shared/schemas/blog'
+
+const props = defineProps<{
+  frontmatter?: BlogPostFrontmatter
+}>()
+
+useSeoMeta({
+  title: props.frontmatter?.title,
+  description: props.frontmatter?.description || props.frontmatter?.excerpt,
+  ogTitle: props.frontmatter?.title,
+  ogDescription: props.frontmatter?.description || props.frontmatter?.excerpt,
+  ogType: 'article',
+})
+</script>
+<template>
+  <main class="container w-full">
+    <article class="prose dark:prose-invert mx-auto">
+      <slot />
+    </article>
+  </main>
+</template>

app/pages/blog/[slug].vue

@@ -1,7 +1,17 @@
 <script setup lang="ts">
-const { data: posts } = await useAsyncData('blog-posts', () =>
-  queryCollection('blog').where('draft', '<>', true).order('date', 'DESC').all(),
-)
+import type { BlogPostFrontmatter } from '#shared/schemas/blog'
+
+const blogModules = import.meta.glob<BlogPostFrontmatter>('./*.md', { eager: true })
+
+const posts: BlogPostFrontmatter[] = []
+
+for (const [path, module] of Object.entries(blogModules)) {
+  if (module.draft) continue
+
+  posts.push({ ...module })
+}
+
+posts.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
 
 const placeHolder = ['atproto', 'nuxt']
 

content/blog/atproto.md app/pages/blog/atproto.mdcontent/blog/atproto.md renamed to app/pages/blog/atproto.md

@@ -1,4 +1,5 @@
 ---
+author: 'Daniel Roe'
 title: 'Server Components'
 date: '2026-01-28'
 slug: 'server-components'

content/blog/first-post.md app/pages/blog/first-post.mdcontent/blog/first-post.md renamed to app/pages/blog/first-post.md

@@ -0,0 +1,5 @@
+import BlogPostWrapper from '~/components/BlogPostWrapper.vue'
+
+export default defineNuxtPlugin(nuxtApp => {
+  nuxtApp.vueApp.component('BlogPostWrapper', BlogPostWrapper)
+})