Nuxt v3中@nuxt/content(v2) Markdown渲染<NuxtImg>遇错误

问题 #

在Nuxt v2搭配@nuxt/content 1.x和@nuxt/img v0版本时，可在Markdown文件中写入<nuxt-img src="img/myImage.jpg"></nuxt-img>直接使用组件。但切换到Nuxt v3环境后，使用@nuxt/content(2.2.1)和适配Nuxt3的@nuxt/image-edge(1.0.0-27769790.4b27db3)运行yarn run dev时，出现如下错误：

[Vue warn]: Failed to resolve component: NuxtImg
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

相关配置信息：

• package.json依赖：

"@nuxt/content": "^2.2.1",
"@nuxt/image-edge": "^1.0.0-27769790.4b27db3",
"nuxt": "^3.0.0-rc.13"

• nuxt.config.ts设置：

export default defineNuxtConfig({
  ssr: false, // 禁用SSR
  components: false // 关闭组件自动导入
})

需确认：操作是否有误？是否需要使用新的MDC语法？该功能是否暂不支持，或是关闭SSR后不支持？

解答 #

核心问题分析 #

1. 组件自动导入被禁用
   你在配置中关闭了components: false，而Nuxt3中NuxtImg组件默认依赖自动导入机制完成注册。关闭后Markdown无法识别该组件，这是报错的直接原因。

2. Content v2需使用MDC语法
   Nuxt Content v2默认采用MDC语法在Markdown中引入组件，不再支持直接书写Vue组件标签的旧方式，这是版本迭代后的规范变化。

3. SSR关闭的适配限制
   当前@nuxt/image-edge在SSR禁用场景下的功能支持仍不完善，静态图片处理等逻辑存在适配问题，但核心的组件识别问题来自前两点。

4. 版本兼容性迭代中
   @nuxt/content 2.2.1与@nuxt/image-edge的适配仍在推进，两者的版本匹配度会直接影响功能可用性。

修复步骤 #

1. 恢复组件自动导入
   修改nuxt.config.ts开启自动导入：

   export default defineNuxtConfig({
     ssr: false,
     components: true // 开启全局组件自动导入
   })
   

   若需保留全局自动导入关闭状态，可在plugins目录手动注册NuxtImg组件。

2. 改用MDC语法调用组件
   将Markdown中的组件调用替换为MDC格式：

   // 基础写法
   ::nuxt-img{src="img/myImage.jpg"}
   
   // 带额外属性的写法
   ::nuxt-img{src="img/myImage.jpg" width="800" height="600" alt="示例图片"}
   

3. 跟进版本更新
   优先升级@nuxt/content和@nuxt/image-edge到最新兼容版本，确保两者功能匹配。

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