Nuxt 3: auto imported ref will not trigger `vue/no-ref-as-operand` warning

[dsvgl]

Checklist

• [x] I have tried restarting my IDE and the issue persists.
• [x] I have read the FAQ and my problem is not listed.

Tell us about your environment

• **ESLint version: 8.23.1
• **eslint-plugin-vue version: 9.4.0
• **Node version: 16.16.0
• **Operating System: MacOS 12.4

Please show your full configuration:

module.exports = {
  env: {
    browser: true,
    node: true,
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 2022,
  },
  extends: [
    '@nuxtjs/eslint-config-typescript',
    'plugin:nuxt/recommended',
    'plugin:vue/vue3-recommended',
    'plugin:vuejs-accessibility/recommended',
    // https://github.com/prettier/eslint-plugin-prettier#recommended-configuration
    'plugin:prettier/recommended',
  ],
  plugins: [],
  rules: {
    // re-enable self-closing rule that was disabled by prettier to prevent conflicts
    // no problem to re-enable as per docs:
    // https://github.com/prettier/eslint-config-prettier#vuehtml-self-closing
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'any',
        },
      },
    ],
    'vue/no-v-html': 'off',
    'vue/valid-v-html': 'off',
    'import/order': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'warn',
    'vue/multi-word-component-names': 'off',
    // NOTE: disable Vue 2 rules
    // @nuxtjs/eslint-config-typescript uses "plugin:vue/recommended" which is for Vue 2
    'vue/no-multiple-template-root': 'off',
  },
};

What did you do? Context: I am using Nuxt 3 and already filed an issue in their repo: https://github.com/nuxt/nuxt.js/issues/14882 They said, I should first ask here...

I'm posting here my original question from the linked issue:

---

I'm constantly forgetting to add .value when working with refs and wondered why eslint is not helping me – no visual hints in VS Code and no error when running eslint in terminal. There is a rule from eslint-plugin-vue to catch this: vue/no-ref-as-operand Turns out, the auto imported ref from #imports is somehow "different" than directly importing from vue. If I do import { ref } from 'vue', I get squiggly lines in VS Code and .value is automatically added when I save the file. See also simple reproduction below.

<script setup lang="ts">
// uncomment this will throw vue/no-ref-as-operand
// import { ref } from 'vue';

// uncomment this will not help
// import { ref } from '#imports';

const count = ref(1);

// NOTE: should be count.value
const foo = count + 1;

console.log(foo);
</script>

What did you expect to happen? Lint errors, both visually in VS Code and via terminal.

What actually happened? No errors reported.

Repository to reproduce this issue https://stackblitz.com/edit/github-cyy9sn?file=app.vue run npm run lint to check output

[ota-meshi]

Thank you for posting issue. Since ESLint's rule checks are based on information from only one file, it is not possible to determine if a ref was resolved by an auto import.

If the way ref is resolved depends on the framework, it makes sense to check with the rule of the eslint-plugin provided by that framework (Nuxt).

If you want to check it in a vue/no-ref-as-operand rule, I think we should add options to rule to let it know how ref is resolved.

[dsvgl]

Hey Yosuke, thx for your reply!

If you want to check it in a vue/no-ref-as-operand rule, I think we should add options to rule to let it know how ref is resolved

Sounds good. Also, eslint-config from nuxt (https://github.com/nuxt/eslint-config/blob/main/packages/eslint-config/package.json#L17) has eslint-plugin-vue as a dependency. I think most users of Nuxt 3 will use its auto import feature, so it would be good this rule would work.

I think we should add options to rule to let it know how ref is resolved

If you provide a way to define this for the rule, would both ways of importing work? Nuxt auto imported ref? and import { ref } from 'vue'`? Or would that mean one or the other?

[ota-meshi]

I think the rule is probably to check both refs. I'm still not sure how best to provide the options that a rule should provide. I think there are probably other rules besides vue/no-ref-as-operand that have similar problems (when using auto-import). I think we should look into them and consider the best option for any rule.

[dsvgl]

Hey again, is there some kind of roadmap when this will be tackled?