Eslint-plugin-vue: [vue/require-component-is] and <component v-bind="{is}">.

[mathieutu]

Tell us about your environment

• "babel-eslint": "^8.2.1",
• "eslint": "^4.15.
• "eslint-config-prettier": "^2.9.
• "eslint-friendly-formatter": "^3.0.
• "eslint-loader": "^1.7.
• "eslint-plugin-vue": "^4.0.0",

Please show your full configuration:

extends: ['plugin:vue/strongly-recommended'],
plugins: ['vue'],
rules: {
    'vue/html-indent': ['error', 4],
    'vue/max-attributes-per-line': 'off',
},

What did you do? Please include the actual source code causing the issue.

<template>
    <component v-bind="{props}">
        <slot/>
    </component>
</template>

<script>
export default {
    props: {
        to: {
            type: String,
            required: true,
        },
    },
    computed: {
        props() {
            if (this.to.match(/^(http(s)?|ftp):\/\//)) {
                return {
                    is: 'a',
                    href: this.to,
                    target: '_blank',
                    rel: 'noopener',
                };
            }
            return {
                is: 'router-link',
                to: this.to,
            };
        },
    },
};
</script>

What did you expect to happen?
No error, the code is correct, and works.

What actually happened? Please include the actual, raw output from ESLint.
2:5 error Expected '<component>' elements to have 'v-bind:is' attribute vue/require-component-is

Thanks!

[michalsnik]

This is not a very common scenario. I'd say you should just disable the rule in this one file:

<template>
    <!-- eslint-disable-next-line vue/require-component-is -->
    <component v-bind="{props}">
        <slot/>
    </component>
</template>

[michalsnik]

Otherwise we might ignore checking for :is binding if there is an object passed in v-bind directive. But it would probably be a minor priority things at this moment and I'm not sure if it's worth the hassle. If you'd like to prepare PR with such update however - feel free :)

[mathieutu]

Yeah, it's really not important, I've opened an issue just to be conscientious, let you know and for history. 😛

[SylannBin]

I have a component where a part can be recursive or be another component.

So when I use <component is="ThisComponentName"> directly in the html the linter complains that :is is not used because I use is instead.

Using <component :is"'ThisComponentName'"> is super annoying and just silly. But it's all we have. And it's probably better than inserting a line of comment to disable the rule.

I thought it was maybe a forgotten case, so just tell me what you think.
Thanks.

[michalsnik]

@SylannBin Why won't you use <ThisComponentName /> straight away? You don't need to use it as <component is="" /> to create recursiveness 🤔 I think this was intentional to force usage of is binding, as if you want to use is attribute - you can instead not use <component> at all.

[SylannBin]

I have read again the code I had written, and you are right. I could have used <ComponentName> directly. I had been so distracted by the linter error, I failed to think about the code itself.
Now that is a lesson. I have had them disabled for some time now, I wonder if its not for the best after all.
Anyway, thank you for your answer and sorry for the waste of time.