Suspense boundary in Dialog Plugin custom component

[hognevevle]

Currently, it seems impossible to use components with an async setup() hook together with Dialog Plugin, as it throws the following error:

[Vue warn]: Component <Anonymous>: setup function returned a promise, but no <Suspense> boundary was found in the parent component tree. A component with async setup() must be nested in a <Suspense> in order to be rendered. 

I have tried the suggested solution in #13463 with defineAsyncComponent, but it seems not to be related to the same issue and gives the same error about missing Suspense boundary.

[hognevevle]

Repro: https://stackblitz.com/edit/quasarframework-ye5hgh?file=src%2Fpages%2FIndexPage.vue

[metalsadman]

that's not an async component https://vuejs.org/guide/components/async.html, it's outline in their docs https://vuejs.org/guide/built-ins/suspense.html#async-setup

[hognevevle]

Sorry for the mixup. Components with an async setup() hook is what I meant. Updated my original post.

[metalsadman]

You need to inplement suspense as the warning suggests.

[hognevevle]

Well, how would you suggest I go about that? The Dialog Plugin spawns a child Vue app which I do not control.

quasar/ui/src/utils/private/global-dialog.js

Lines 146 to 163 in 4f08b24

	let app = createChildApp({
	name: 'QGlobalDialog',
	setup: () => () => h(DialogComponent, {
	...props,
	ref: dialogRef,
	onOk,
	onHide,
	onVnodeMounted (...args) {
	if (typeof props.onVnodeMounted === 'function') {
	props.onVnodeMounted(...args)
	}
	nextTick(() => applyState('show'))
	}
	})
	}, parentApp)
	vm = app.mount(el)

I suppose I could make a wrapper component, but that would mean needing two components per dialog, which is a bit cumbersome:

FooDialogWrapper.vue

<template>
  <Suspense>
    <FooDialog />
  </Suspense>
</template>

A suggestion could be a suspense option, so that QGlobalDialog injects a Suspense boundary for me:

$q.dialog({
    component: FooDialog,
    suspense: true
  });

[metalsadman]

I've no experience with suspense since I tend not to use it since it's an experimental feature. fwiw, dialog plugin will work with async component as you see on the ticket you linked. I usually just use v-if for which part of the template that will wait for something asyncronous usually called at @show event of the custom dialog component.

[ddenev]

@metalsadman ,

thank you for your input! The problem is - your suggestion to use:

$q.dialog({
  component: await defineAsyncComponent(() => import('./MyAsyncSetupDialog.vue')).__asyncLoader(),
})

doesn't work. I'm still getting:

[Vue warn]: Component <Anonymous>: setup function returned a promise, but no <Suspense> boundary was found in the parent component tree. A component with async setup() must be nested in a <Suspense> in order to be rendered.

and

$q.dialog({
  component: defineAsyncComponent(() => import('./MyAsyncSetupDialog.vue')),
})

also doesn't work.

How can we use the dialog plugin with a component that has an async setup function?

Thank you in advance.

[pdanpdan]

It should work:

quasar/ui/dev/src/pages/global/dialog-plugin.vue

Line 562 in 3d03c2a

customComponentCompositionApi (async) {

quasar/ui/dev/src/pages/global/dialog-spawn.vue

Line 34 in 3d03c2a

async function openAsyncWorkaround () {

Ok, I got it - the component in the dialog is async. Let me research.

[pdanpdan]

You need to make a wrapper dialog component that is not async and pass it the async component.
In the example the wrapper will:

• render the component in component key in componentProps
• use the key loader in componentProps for the #fallback slot in Suspense
• pass all props from the componentProps (except component and loader) and onDialogHide, onDialogOK, and onDialogCancel to the final component

https://pdanpdan.github.io/quasar-play/?file=src%2FAsyncDialogWrapper.vue&preview=t&previewMode=preview&editor=codemirror#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

[ddenev]

Thank you very much, @pdanpdan , for the research and for the suggestion!

In the long run, do you think it makes sense to extend the dialog plugin to support internally, smth like @hognevevle's suggested above:

$q.dialog({
  component: MyAsyncSetupDialog,
  suspense: true
});

The suggested workaround with the wrapper introduces too much boilerplate and unnecessary additional code, which (I believe) can simply be replaced and implemented internally by Quasar.

What do you think?

Thank you again!

[pdanpdan]

As an internal implementation it would not be configurable, and the overhead would be too much for the number of use cases IMO.
What I have described above is something that would have to be done for everyone.
Even if it works I would not use it like that.
I would keep the component not async and:

• load the data async
• or use suspense and load another sub-component that is async