Nuxt3中@vueuse/components组件自动导入失效问题求助

问题原因 #

你额外配置了imports.presets，但@vueuse/nuxt模块本身已经内置了组件自动导入的逻辑，手动配置的预设反而会和模块内置逻辑冲突，导致模板无法识别组件。

正确配置步骤 #

1. 简化nuxt.config.ts配置
   移除imports.presets部分，只保留@vueuse/nuxt模块即可：

   export default defineNuxtConfig({
     modules: ["@vueuse/nuxt"],
   })
   

2. 清理项目缓存

   • 删除项目根目录下的.nuxt文件夹
   • 删除node_modules文件夹和对应的锁文件（package-lock.json或yarn.lock）
   • 重新执行依赖安装命令：npm install（或yarn install）

3. 重启开发服务
   执行npm run dev重启Nuxt开发服务，此时@vueuse/components中的组件会被自动全局导入，你可以直接在模板中使用UseWindowSize组件。

验证 #

重启服务后，检查.nuxt/imports.d.ts文件仍会包含UseWindowSize的类型声明，同时模板中的组件可以正常渲染，不会再出现组件解析失败的警告。

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