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?

[dsvgl]

Nuxt 3 is out. Would be really helpful having this.

[ota-meshi]

I think we should first list all the rules that have problems with auto-import. We then need to consider what additional options would be best for any given user. But I'm not familiar with nuxt and can't find the time to do it. So we'll have to wait for someone to list the rules and summarize what problems each has.

[dsvgl]

Ok, understood. I will reopen my issue at the nuxt repo and ask for help from the nuxt team. https://github.com/nuxt/nuxt.js/issues/14882

[EggTronic]

does this issue have any workaround solutions?

[antfu]

Made a PR: https://github.com/vuejs/eslint-plugin-vue/pull/2422