feat: generate blog posts content via markdown

Author: jonathanyeong

app/pages/blog/[...path].vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const route = useRoute()
+const { data: post } = await useAsyncData(route.path, () => {
+  return queryCollection('blog').path(route.path).first()
+})
+
+definePageMeta({
+  name: `blog-post`,
+  // alias: ['/:path(.*)*'],
+})
+
+useSeoMeta({
+  title: () => post.value?.title || 'Blog', // TODO: How does i18n deal with dynamic values? $t('blog.post.title'),
+  description: () => (post.value?.description ? `Blog Article ${post.value?.description}` : ''),
+})
+</script>
+
+<template>
+  <main class="container py-8 sm:py-12 w-full">
+    <!-- Header -->
+    <header class="mb-8 pb-8 border-b border-border">
+      <div class="">I AM A WEAK HEADER</div>
+    </header>
+
+    <article v-if="post">
+      <ContentRenderer v-if="post" :value="post" />
+    </article>
+
+    <article v-else>
+      <h1>Post Not Found</h1>
+      <p>We couldn't find a post at /blog/{{ route.path }}</p>
+    </article>
+  </main>
+</template>
+
+<!-- TODO: styles -->
+<style>
+h1 {
+  @apply text-4xl font-bold text-gray-900 dark:text-white mb-2;
+}
+</style>

app/pages/blog/[slug].vue

@@ -1,12 +1,7 @@
 <script setup lang="ts">
-const route = useRoute('blog')
-const router = useRouter()
-
-// 1. Define your list of posts (This would eventually come from useAsyncData)
-const posts = [
-  { slug: 'hello-world', title: 'Hello World', excerpt: 'My first post' },
-  { slug: 'server-components', title: 'Server Components', excerpt: 'Zero JS' },
-]
+const { data: posts } = await useAsyncData('blog-posts', () =>
+  queryCollection('blog').where('draft', '<>', true).order('date', 'DESC').all(),
+)
 
 definePageMeta({
   name: 'blog',

app/pages/blog/index.vue

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

content.config.ts

@@ -0,0 +1,12 @@
+---
+title: 'Hello World'
+date: '2026-01-28'
+slug: 'first-post'
+description: 'My first post on the blog'
+excerpt: 'My first post'
+draft: false
+---
+
+# My First Page
+
+Here is some content.

content/blog/first-post.md

@@ -0,0 +1,12 @@
+---
+title: 'Server Components'
+date: '2026-01-28'
+slug: 'server-components'
+description: 'My first post on the blog'
+excerpt: 'Zero JS'
+draft: false
+---
+
+# Server components
+
+Here is some server component razzle dazzle.

content/blog/server-components.md

@@ -34,6 +34,7 @@ export default defineNuxtConfig({
     '@vueuse/nuxt',
     '@nuxtjs/i18n',
     '@nuxtjs/color-mode',
+    '@nuxt/content',
   ],
 
   colorMode: {

nuxt.config.ts

@@ -44,6 +44,7 @@
     "@nuxt/scripts": "0.13.2",
     "@nuxtjs/color-mode": "4.0.0",
     "@nuxtjs/html-validator": "2.1.0",
+    "@nuxt/content": "3.11.0",
     "@nuxtjs/i18n": "10.2.1",
     "@shikijs/langs": "3.21.0",
     "@shikijs/themes": "3.21.0",
@@ -77,6 +78,7 @@
     "@types/validate-npm-package-name": "4.0.2",
     "@unocss/nuxt": "66.6.0",
     "@unocss/preset-wind4": "66.6.0",
+    "@valibot/to-json-schema": "^1.5.0",
     "@vite-pwa/assets-generator": "1.0.2",
     "@vite-pwa/nuxt": "1.1.0",
     "@vitest/browser-playwright": "4.0.18",

package.json

@@ -0,0 +1,22 @@
+import { object, string, boolean, array, optional } from 'valibot'
+import type { InferOutput } from 'valibot'
+
+/**
+ * Schema for blog post frontmatter
+ * Uses simple Valibot primitives (required by Nuxt Content's JSON Schema conversion)
+ */
+export const BlogPostSchema = object({
+  title: string(),
+  date: string(),
+  description: string(),
+  slug: string(),
+  excerpt: optional(string()),
+  author: optional(string()),
+  tags: optional(array(string())),
+  draft: optional(boolean()),
+})
+
+/**
+ * Inferred type for blog post frontmatter
+ */
+export type BlogPostFrontmatter = InferOutput<typeof BlogPostSchema>