I am looking to create a modal wrapper that can dynamically inject components into it. The modal itself should handle tasks like closing, while the injected component is responsible for determining what is displayed and how data is handled. Here is my current approach:
const Modal = namespace("Modal");
@Component export default class AppModal extends Vue {
public component: any = null;
@Modal.State
public modalVisible!: boolean;
@Modal.State
public modalComponent!: string;
get injectedComponent() {
return this.modalComponent;
}
@Modal.Mutation
public hideModal!: () => void
@Watch('injectedComponent')
onModalComponent(componentName: string) {
if(!componentName) return;
debugger;
Vue.component(componentName, () => import(`./components/${componentName}`))
this.component = componentName;
}
The showModal method in the store sets modalVisible to true and takes a componentName as an argument. We then listen for this change, import the component, and use a dynamic component to inject it into the modal.
<template>
<v-dialog v-model="modalVisible" class="muc-modal" max-width="350" persistent>
<v-card>
<component :is="modalComponent"/>
</v-card>
</v-dialog>
When I send a componentName to the watcher, I encounter the following error:
Unknown custom element:
It seems like the component I am trying to pass into my AppModal cannot be resolved. Am I doing something wrong?