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

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

<script>
export default {
  computed: {
    currentMsg() {
      if (Math.random() > 0.5) return "say-hello";
      else return "say-bye";
    }
  },
  components: {
    'say-hello': {
      template: '<div>Hello</div>'
    },
    'say-bye': {
      template: '<div>Bye</div>'
    }
  }
}
</script>

Compliant Code Example

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

<script>
export default {
  computed: {
    currentMsg() {
      if (Math.random() > 0.5) return "say-hello";
      else return "say-bye";
    }
  },
  components: {
    'say-hello': {
      template: '<div>Hello</div>'
    },
    'say-bye': {
      template: '<div>Bye</div>'
    }
  }
}
</script>

Version

This rule was introduced in DeepScan 1.14.0-beta.

See

• Vue dynamic components

• [Vue warn]: Unknown custom element: <currentMsg> - did you register the component correctly? For recursive components, make sure to provide the "name" option.