When migrating to Nuxt Content V3 for LLM compatibility, we face two main challenges:
In Nuxt Content V2, assets were automatically handled within content folders. V3 requires manual asset management.
URLs with or without trailing slashes can cause problems with relative image paths, especially in production environments like Vercel. We need to handle these cases specifically.
First, update your nuxt.config.ts:
export default defineNuxtConfig({
nitro: {
plugins: ['~/scripts/copy-content-images']
}
})
Create scripts/copy-content-images.ts:
import { promises as fs } from 'fs'
import { join, relative, dirname } from 'path'
// Helper to check file existence
async function exists(path: string) {
try {
await fs.access(path)
return true
} catch {
return false
}
}
async function copyPngFiles(sourcePath: string, targetPath: string) {
try {
const entries = await fs.readdir(sourcePath, { withFileTypes: true })
for (const entry of entries) {
const srcPath = join(sourcePath, entry.name)
if (entry.isDirectory()) {
await copyPngFiles(srcPath, targetPath)
} else if (entry.name.toLowerCase().endsWith('.png')) {
const relPath = relative('./content', srcPath)
const destPath = join(targetPath, relPath)
await fs.mkdir(dirname(destPath), { recursive: true })
await fs.copyFile(srcPath, destPath)
console.log(`✓ Asset copied: ${relPath}`)
}
}
} catch (error) {
console.error('❌ Error copying assets:', error)
}
}
export default defineNitroPlugin(async () => {
const contentDir = './content'
const outputDir = './.output/public'
if (await exists(contentDir)) {
console.log('📁 Starting asset migration...')
await copyPngFiles(contentDir, outputDir)
console.log('✨ Asset migration complete')
}
})
Create a server middleware to handle image serving in development:
// server/middleware/serve-images.ts
import { join } from 'node:path'
import { readFileSync, existsSync } from 'node:fs'
import { defineEventHandler } from 'h3'
export default defineEventHandler((event) => {
const path = event.path
// Check if the request is for an image
if (path.match(/\.(png|jpg|jpeg|gif|webp)$/)) {
const filePath = join(process.cwd(), 'content', path)
if (existsSync(filePath)) {
const file = readFileSync(filePath)
const mimeType = getMimeType(filePath)
return new Response(file, {
headers: { 'Content-Type': mimeType },
})
}
}
})
This middleware:
To handle relative paths correctly, we implement a transform function when fetching content:
const { data: post } = await useAsyncData('page-' + path, async () => {
return queryCollection('content').path(path).first();
}, {
transform: (data) => {
data.body.value = updateImageSources(data.body.value, data.path);
return data;
}
})
The transform function recursively processes the markdown content array and converts relative paths to absolute ones.