升级至Nuxt Bridge：自动导入引发ESLint未定义错误

方法一：自动生成ESLint全局声明（推荐） #

Nuxt Bridge基于unplugin-auto-import实现自动导入，可配置它生成ESLint识别所需的全局变量声明文件：

1. 修改nuxt.config.js，开启自动导入的ESLint配置生成：

export default {
  bridge: {
    autoImports: {
      eslintrc: {
        enabled: true // 启用生成.eslintrc-auto-import.json
      },
      dts: true // 可选，同时生成TypeScript类型声明文件
    }
  }
}

2. 在项目根目录的.eslintrc.js（或.eslintrc.json）中引入生成的配置：

module.exports = {
  extends: [
    // 引入自动生成的配置
    './.eslintrc-auto-import.json',
    // 保留你原有的其他ESLint配置，比如：
    '@nuxtjs/eslint-config',
    'plugin:vue/vue3-recommended'
  ],
  // 其他原有配置...
}

3. 重启ESLint服务（或IDE的ESLint插件），报错即可消失。

方法二：手动声明全局变量 #

如果不想自动生成配置，可直接在ESLint配置中手动声明所有用到的自动导入API：

修改.eslintrc.js，添加globals字段：

module.exports = {
  // 其他原有配置...
  globals: {
    ref: 'readonly',
    toRefs: 'readonly',
    useNuxtApp: 'readonly',
    // 按需添加其他你用到的API，比如reactive、computed等
  }
}

额外注意事项 #

• 移除旧的@nuxt/composition-api相关ESLint配置（如果之前有配置过）。
• 确保eslint-plugin-vue版本升级到v8及以上，以支持Vue 3组合式API语法。
• 若项目使用TypeScript，需确保@nuxtjs/eslint-config-typescript版本适配Nuxt Bridge。

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