Vue dynamic component should have a dynamically bound is attribute

• VUE_BAD_DYNAMIC_COMPONENT
• Error
• Medium
• vue

This rule applies when a Vue dynamic component does not have a proper is attribute.

Since dynamic component is used to dynamically choose a component, dynamic is attribute is essential.

• If a dynamic component does not have an is attribute, Vue considers it as an unknown custom element.
• If a dynamic component has the attribute, but a static one, it is likely that v-bind directive on the attribute is missing.

Noncompliant Code Example

<script setup>
import SayHi from './SayHi.vue';
import SayBye from './SayBye.vue';

const currentMsg = Math.random() > 0.5 ? SayHi : SayBye;
</script>

<template>
  <component is="currentMsg" /> <!-- VUE_BAD_DYNAMIC_COMPONENT alarm -->
</template>

Compliant Code Example

<script setup>
import SayHi from './SayHi.vue';
import SayBye from './SayBye.vue';

const currentMsg = Math.random() > 0.5 ? SayHi : SayBye;
</script>

<template>
  <component v-bind:is="currentMsg" />
</template>

Version

This rule was introduced in DeepScan 1.14.0-beta.

See

• Built-in Special Elements: <component>