@dobbel said in [Solved] Customized component issue: For recursive components, make sure to provide the "name" option:
btw why does your debug modal constant use an arrow function?
Good catch, I actually did simplify my example, the full example actually looked like this:
const modals = {
'error': () => import(/* webpackChunkName: "modals" */ '@/modals/error'),
'print': () => import(/* webpackChunkName: "modals" */ '@/modals/print'),
'category-filter': () => import(/* webpackChunkName: "category" */ '@/modals/category-filter'),
'debug': () => import(/* webpackChunkName: "debug" */ '@/modals/debug'),
}
export default async ({ app, router, store, Vue }) => {
Vue.prototype.$showModal = (type, props) => {
return new Promise(async (resolve, reject) => {
if(!modals.hasOwnProperty(type)) {
return reject()
}
const component = (await modals[type]()).default
// Option 1 is to not resolve promise until dialog is closed
// disadvantage of not having access to the created dialog object from your component
// Also, you must use .then instead of onOk, and .catch instead of .onCancel
Dialog.create({
...props,
component,
parent: this.router.app.$root,
}).onOk(payload => resolve(payload))
.onCancel(() => reject())
.onDismiss(() => reject())
// // Option 2 lets you have access to the dialog object, and you use .onOk, .onCancel, etc
// // But you must await the call, i.e.
// // (await this.$showDialog('debug', {}).onOk(() => {})
// const dialog = Dialog.create({
// ...props,
// component,
// parent: this.router.app.$root,
// })
// resolve(dialog)
})
}
}
I do this to not increase my bundle size with tons of modals. For most of them, they get put into the modals chunk via webpack, but for some of them if I already have a chunk, like category, I put it there. The downside to lazy loading like this is that you have to await the component.
Originally, I used option 1 above, but have changed to option 2, but I might make some tweaks to it yet.
And yeah, SSr is such a different way of thinking sometimes. I had always avoided it, but it’s not that bad as long as you can keep the concept of when stateful singletons happen, and their effects.
