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

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>

[mathieutu]

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