Skip to content

[vue/component-name-in-template-casing] False positive for dynamic component in template #2048

Closed
@Ky6uk

Description

@Ky6uk

I've found a false positive scenario when TypeScript is enabled and type Component is imported from the vue library. Not pretty sure this is the problem with this plugin. 🤔

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: v8.28.0
  • eslint-plugin-vue version: v9.8.0
  • @typescript-eslint/parser version: v5.44.0
  • Node version: v18.12.0
  • Operating System: Mac OS

Please show your full configuration:

{
    "parserOptions": {
        "parser": "@typescript-eslint/parser",
        "extraFileExtensions": [".vue"]
    },

    "extends": ["plugin:vue/base"],

    "rules": {
        "vue/component-name-in-template-casing": "error"
    }
}

What did you do?

<template>
  <component />
</template>

<script lang="ts" setup>
  import { type Component } from 'vue';
</script>

What did you expect to happen?

No any issues with code.

What actually happened?

App.vue
  2:3  error  Component name "component" is not PascalCase  vue/component-name-in-template-casing

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

Repository to reproduce this issue

https://github.com/Ky6uk/eslint-vue-component-name-in-template-casing-bug

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions