Last active
May 15, 2021 22:25
-
-
Save emkis/f906770615e23ea9e5d207dff535cf9d to your computer and use it in GitHub Desktop.
Dynamic Attachments in Vue.js 3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
}, | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
components/ | |
... | |
Comment/ | |
Comment.vue | |
DynamicAttachment/ | |
DynamicAttachment.ts | |
Types/ | |
Image.vue | |
Video.vue | |
File.vue | |
... |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Component code created based on this Medium Article.