Nuxt3中@nuxtjs/composition-api安装与兼容问题求助

问题根源 #

@nuxtjs/composition-api是专为Nuxt2设计的适配包，用来在Nuxt2环境中兼容Vue3的Composition API。但Nuxt3本身基于Vue3开发，原生内置了完整的Composition API，这个旧适配包和Nuxt3的Vue3 runtime完全不兼容，才会出现找不到set/del导出的错误。

分步解决方案 #

1. 移除旧适配包
   执行命令卸载这个不再需要的包：

   yarn remove @nuxtjs/composition-api
   

2. 替换代码中的导入语句
   把原来从@nuxtjs/composition-api导入的API，替换为Nuxt3/Vue3的原生支持：

   • onMounted、computed、ref：直接从vue导入，或者利用Nuxt3的自动导入特性（无需手动导入可直接使用）

     // 替换前
     import { onMounted, computed, ref } from '@nuxtjs/composition-api'
     // 替换后
     import { onMounted, computed, ref } from 'vue'
     

   • useRoute：可以直接使用（Nuxt3自动导入），或者从vue-router导入

     // 替换前
     import { useRoute } from '@nuxtjs/composition-api'
     // 替换后（二选一）
     import { useRoute } from 'vue-router'
     // 或者直接调用，Nuxt3自动导入
     const route = useRoute()
     

   • useContext：Nuxt3已移除这个API，根据原使用场景替换为对应API：
     • 获取环境变量/项目配置：用useRuntimeConfig
     • 获取路由实例：用useRouter
     • 获取Nuxt应用实例：用useNuxtApp

     // 替换前
     import { useContext } from '@nuxtjs/composition-api'
     const { $config, $router } = useContext()
     // 替换后
     const { $config } = useRuntimeConfig()
     const $router = useRouter()
     

3. 清理依赖缓存并重新安装
   避免残留依赖导致异常：

   # Windows系统
   rd /s /q node_modules && del yarn.lock && yarn install
   # Mac/Linux系统
   rm -rf node_modules yarn.lock && yarn install
   yarn cache clean
   

4. 启动项目测试
   执行yarn dev，确认错误消失。

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