Dynamic Attachments in Vue.js 3

Comment.vue

<template>
  <h1>This is my comment</h1>

  <p>
    Current attachment type: <strong>{{ attachment.type }}</strong>
  </p>

  <button @click="() => (attachment.type = 'fake-type')">Invalid type</button>
  <button @click="() => (attachment.type = 'Default')">Default</button>
  <button @click="() => (attachment.type = 'Button')">Button</button>
  <button @click="() => (attachment.type = 'Image')">Image</button>

  <DynamicAttachment :key="attachment.type" :type="attachment.type" :content="attachment.content" />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import DynamicAttachment from './DynamicAttachment/DynamicAttachment.vue'

export default defineComponent({
  name: 'Comment',
  components: { DynamicAttachment },
  setup() {
    const attachment = ref({
      type: 'Default',
      content: { itWorks: true },
    })

    return { attachment }
  },
})
</script>

DynamicAttachment.ts

import { defineComponent, PropType, h, toRefs, defineAsyncComponent } from 'vue'

export default defineComponent({
  name: 'DynamicAttachment',
  props: {
    type: {
      type: String as PropType<'File' | 'Image' | 'Video'>,
      required: true,
      default: 'Default',
    },
    content: { type: Object, required: true },
  },
  setup(props) {
    const { type, content } = toRefs(props)

    const AttachmentLoader = h('h2', 'Fetching attachment chunk...')
    const AttachmentError = h('h2', 'Something went wront :(')
    const DynamicAttachment = () => {
      return import(/* webpackChunkName: "DynamicAttachment" */ `./Types/${type.value}.vue`)
    }

    const AttachmentComponent = defineAsyncComponent({
      loader: DynamicAttachment,
      loadingComponent: AttachmentLoader,
      errorComponent: AttachmentError,
      timeout: 5000,
    })

    return () => h(AttachmentComponent, { content: content.value }) // passing content as a prop to AttachmentComponent
  },
})

folder-structure.txt

components/
  ...
  Comment/
    Comment.vue
  DynamicAttachment/
    DynamicAttachment.ts
    Types/
      Image.vue
      Video.vue
      File.vue
      ...

Component code created based on this Medium Article.