Vue.js Load Dynamic Component

Jun 1, 2020
<template>
  <div>
    <component :is="component" />
  </div>
</template>

<script>
import Batch from '~/components/Batch'
import Note from '~/components/Note'

export default {
  props: ['componentType']
  computed: {
    component() {
      /*
      switch (componentType) {
        case 'Batch':
          return Batch
        case 'Note':
          return Note
      }
       */
      return componentType
    }
  },
  components: { Batch, Note }
}

References:

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.