False positive eslint@typescript-eslint/no-unused-vars if imported type used in template declaration only

[Tanimodori]

Before You File a Bug Report Please Confirm You Have Done The Following...

• I'm using eslint-plugin-vue.
• I'm sure the problem is a parser problem. (If you are not sure, search for the issue in eslint-plugin-vue repo and open the issue in eslint-plugin-vue repo if there is no solution.
• I have tried restarting my IDE and the issue persists.
• I have updated to the latest version of the packages.

What version of ESLint are you using?

8.28.0

What version of eslint-plugin-vue and vue-eslint-parser are you using?

• vue-eslint-parser@9.1.0
• eslint-plugin-vue@9.3.0

What did you do?

Configuration

module.exports = {
  root: true,
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/eslint-config-typescript",
    "@vue/eslint-config-prettier",
  ],
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
    ecmaVersion: "latest",
    sourceType: "module",
  },
};

App.vue

<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
import TheWelcome from "./components/TheWelcome.vue";
// 'Foo' is defined but never used. (eslint@typescript-eslint/no-unused-vars)
import type { Foo, Bar } from "./types";
</script>

<template>
  <header>
    <img
      alt="Vue logo"
      class="logo"
      src="./assets/logo.svg"
      width="125"
      height="125"
    />

    <div class="wrapper">
      <HelloWorld msg="You did it!">
        <template #default="{ foo }: Foo">
          <p>Foo: {{ foo as Bar }}</p>
        </template>
      </HelloWorld>
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

types.ts

export interface Foo {
  foo: string;
}

export type Bar = string;

What did you expect to happen?

Foo is used in template like HelloWorld and Bar which should be a used var.

What actually happened?

npm run lint

vue-eslint-unused-vars-repro@0.0.0 lint
eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore

C:\projects\vue-eslint-unused-vars-repro\src\App.vue
5:15 warning 'Foo' is defined but never used @typescript-eslint/no-unused-vars

✖ 1 problem (0 errors, 1 warning)

Link to Minimal Reproducible Example

https://github.com/Tanimodori/vue-eslint-unused-vars-repro

Additional comments

I read from the FAQ that the no-unused-vars is fixed in vue-eslint-parser>9. It seems that types used in slot declaration is still unfixed while the Vue component and interpolation are fixed.

[jewelsonn]

Same issue using 9.1.0.

[akarmes]

I'm receiving a similar error with 9.1.0:

<template>
  <foo>
    <template #bar>
      <baz />
    </template>
  </foo>
</template>

<script setup lang="ts">
import Foo from '@/components/Foo.vue';
// warning  'Baz' is defined but never used  @typescript-eslint/no-unused-vars
import Baz from '@/components/Baz.vue';
</script>

[ota-meshi]

I think we solved this problem. Please use version v9.1.1.

[Tanimodori]

Confirmed this issue is fixed. Thanks for fixing it!