Vue.js Generic Dynamic Component Rendering

Viewed 470

I have a component that dynamic render components that get as props

<template>
    <div>
        <component :is="component" :data="data" v-if="component" />
    </div>
</template>

<script>

export default {
    name: 'dynamic-component-renderer',
    props: ['data', 'type'],
    computed: {
        component() {
            if (!this.type) {
                return null;
            }
            return this.type;
        },
    }
}
</script>

The issue is in imports, I need to dynamic import, I know that I can do dynamic importing with webpack like this: () => import('./my-async-component'), but in my case, I don't need lazyLoad.

So I need to have a generic dummy component (dynamic-component-renderer) that will not know what components will get and dynamically render.

0 Answers
Related