Nuxt3内容驱动博客：文档为空时如何返回404状态码？

当你的Nuxt3博客使用@nuxt/content模块，且/content目录下存在仅含前置元数据（front-matter）、无正文内容的Markdown占位文件时，访问对应页面会显示空文档提示但返回200状态码。要实现空文档页面返回404状态码，可按以下方法配置：

方法一：在文档路由页面中直接判断处理 #

Nuxt Content默认使用动态路由页面（如pages/[...slug].vue）渲染文档，你可以在该页面中获取文档后判断正文是否为空，为空则抛出404错误：

<template>
  <div v-if="document">
    <h1>{{ document.title }}</h1>
    <ContentRenderer :value="document" />
  </div>
</template>

<script setup>
const { params } = useRoute()
const { data: document, error } = await useAsyncData(
  `document-${params.slug}`,
  async () => {
    const doc = await useContent().findOne({
      where: { slug: params.slug.join('/') }
    })
    // 验证文档正文是否为空
    if (!doc?._body || doc._body.trim() === '') {
      throw createError({
        statusCode: 404,
        statusMessage: 'Document Not Found'
      })
    }
    return doc
  }
)

// 捕获错误并抛出对应状态码
if (error.value) {
  throw createError({
    statusCode: error.value.statusCode || 500,
    statusMessage: error.value.statusMessage || 'Internal Server Error'
  })
}
</script>

方法二：全局钩子标记+页面判断 #

如果需要全局统一处理空文档，可先在nuxt.config.ts中通过钩子标记空文档，再在页面中判断标记并抛出404：

1. 在nuxt.config.ts添加钩子：

export default defineNuxtConfig({
  modules: ['@nuxt/content'],
  hooks: {
    // 解析文档后标记空文档
    'content:document:afterParse': (document) => {
      if (!document._body || document._body.trim() === '') {
        document._isEmpty = true
      }
    }
  }
})

2. 在文档路由页面中判断标记：

<template>
  <div v-if="document">
    <h1>{{ document.title }}</h1>
    <ContentRenderer :value="document" />
  </div>
</template>

<script setup>
const { params } = useRoute()
const { data: document } = await useAsyncData(
  `document-${params.slug}`,
  () => useContent().findOne({
    where: { slug: params.slug.join('/') }
  })
)

if (document.value?._isEmpty) {
  throw createError({
    statusCode: 404,
    statusMessage: 'Document Not Found'
  })
}
</script>

配置完成后，访问仅含前置元数据的占位文档页面时，Nuxt会返回404状态码，并自动渲染你的自定义404页面（若已配置）。

内容的提问来源于stack exchange，提问作者Spunkie