Register Class Components as Vue Components

[vegerot]

Tell us about your environment

• ESLint version: Latest
• eslint-plugin-vue version: Latest
• Node version: Latest

The problem you want to solve. Many people (possibly most) that use Typescript and Vue use the official first-party Vue Class Components extension for Vue. In this library, components are defined using the @Component decorator. I think this is common enough that rules that check components (such as no-unregistered-components) should also accept @Component without having to add a // @vue/component comment above

Your take on the correct solution to problem. Modify isVueComponent to include a check for an @Component decorator. I have never contributed here before, but I would be willing to try implementing this too, if I could have some guidance from you guys.

Additional context

[jwayne2]

I modified isVueComponent function and now it detects class components without having to add // @vue/component comment. I just changed line 1889 to this: if (callee.name.toLowerCase() === 'component') {

Not sure why, but it works.

[Threnos]

Adding // @vue/component comment helps with getting errors in template. If it exists, is there a list of such comments that will help eslint to work with vue-class-component? This is surely a temporary fix, but much wanted.

[andrewmackrodt]

This also applies to Vue 3 where @Options is used instead of @Component, e.g. when checking rules such as

• vue/component-name-in-template-casing

Modifying @jwayne2's suggestion slightly works with Vue 3's vue-class-component

if (['component', 'options'].includes(callee.name.toLowerCase())) {

For now I will use // @vue/component as I'm not sure what unintended affects modifying lib/utils/index.js:getVueComponentDefinitionType will have.

(Edit: reposting deleted comment as it was linking commits from an unrelated project, apologies for the link spam).

[vegerot]

I modified isVueComponent function and now it detects class components without having to add // @vue/component comment. I just changed line 1889 to this: if (callee.name.toLowerCase() === 'component') {

Not sure why, but it works.

@jwayne2 would you post the diff, and the line number with a given commit please? I'm looking at line 1889 in master, but I'm not sure if that's the right line

[andrewmackrodt]

@vegerot this line worked for Vue 3 (options), I imagine it's the same regarding @jwayne2's comment: https://github.com/vuejs/eslint-plugin-vue/blob/v7.6.0/lib/utils/index.js#L1923

Index: node_modules/eslint-plugin-vue/lib/utils/index.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/node_modules/eslint-plugin-vue/lib/utils/index.js b/node_modules/eslint-plugin-vue/lib/utils/index.js
--- a/node_modules/eslint-plugin-vue/lib/utils/index.js	(date 1614283926279)
+++ b/node_modules/eslint-plugin-vue/lib/utils/index.js	(date 1614283926279)
@@ -1920,7 +1920,7 @@
     }
 
     if (callee.type === 'Identifier') {
-      if (['component', 'options'].includes(callee.name.toLowerCase())) {
+      if (callee.name === 'component') {
         // for Vue.js 2.x
         // component('xxx', {})
         const isDestructedVueComponent = isObjectArgument(parent)

[jwayne2]

@andrewmackrodt your diff seems to have source and target in the wrong order. Could you also make pull requests with your changes?

[FloEdelmann]

Vue Class Component is no longer actively maintained and not recommended for Vue 3: https://class-component.vuejs.org/

This library is no longer actively maintained. It is no longer recommend to use Class-based components in Vue 3. The recommended way to use Vue 3 in large applications is Single-File Components, Composition API, and <script setup>.

So I suggest to not invest time in eslint-plugin-vue to start supporting this.