`vue/no-deprecated-filter` triggers for dynamic generic components

[darioackermann]

Checklist

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

Tell us about your environment

• ESLint version: 9.30.1
• eslint-plugin-vue version: 10.3.0
• Vue version: 3.5.17
• Node version: 20.19.3
• Operating System: Windows

Please show your full configuration:

import pluginVue from 'eslint-plugin-vue'
import {
  defineConfigWithVueTs,
  vueTsConfigs,
} from '@vue/eslint-config-typescript'

export default defineConfigWithVueTs(
    // chosen vue defaults
    pluginVue.configs['flat/recommended'],
    vueTsConfigs.recommended,
)

What did you do?

Attempting to include a dynamic generic component

GenCo.vue

<template>
  This is my generic component
</template>
<script setup lang="ts" generic="T">
</script>

App.vue

<script setup lang="ts">
import GenCo from './components/GenCo.vue'

type User = {
  key: 'User'
  name: string
  age: number
}

type Product = {
  key: 'Product'
  title: string
  price: number
}
</script>

<template>
  <component :is="GenCo<User | Product>" /> <!--  18:19  error  Filters are deprecated               vue/no-deprecated-filter -->
</template>

What did you expect to happen?
The rule should not trigger

What actually happened?
Triggers vue/no-deprecated-filter.

I suspect because it fails to parse the content of <component :is /> correctly.
Note this issue was not present previously, so it might be a regression

Repository to reproduce this issue
https://github.com/darioackermann/eslint-vue-ts-filter

[waynzh]

As a quick workaround: const Comp = GenCo<User | Product> then <component :is="Comp" /> works.

It might be an issue with vue-eslint-parser, since GenCo<User | Product> gets parsed as a VFilterSequenceExpression. cc @ota-meshi

tree.json

{
    "type": "VExpressionContainer",
    "text": "\"GenCo<User | Product>\"",
    "children": [
        {
            "type": "VFilterSequenceExpression",
            "text": "GenCo<User | Product>",
            "children": [
                {
                    "type": "BinaryExpression",
                    "text": "GenCo<User",
                    "children": [
                        {
                            "type": "Identifier",
                            "text": "GenCo",
                            "children": []
                        },
                        {
                            "type": "Identifier",
                            "text": "User",
                            "children": []
                        }
                    ]
                },
                {
                    "type": "VFilter",
                    "text": "Product>",
                    "children": [
                        {
                            "type": "Identifier",
                            "text": "Product>",
                            "children": []
                        }
                    ]
                }
            ]
        }
    ]
}

[darioackermann]

Thanks! Yes, I am aware of the workaround. Should I raise/link the issue in vue-eslint-parser ?

[waynzh]

Yeah, let’s track this issue there. Thanks!

Update: This issue has been reported in eslint-vue-parser. Since it’s potentially a breaking change, let’s close this issue for now and follow up upstream.