How to extract a TemplatePromise in another component

[antoniogiroz]

Hello!

I'm trying to use the createTemplatePromise composable to show a modal dialog that calls to the API to save data.

But the form in the modal is very long, so I want to extract it in a component called UserModal.vue, for instance.

Here is a demo playground: https://stackblitz.com/edit/vitejs-vite-k1frby

How can I wait for the TemplatePromise resolves the promise when it is not in the same component?

Thanks a lot!

[antfu]

You could do:

// Foo.vue
<script setup>

const TemplatePromise = createTemplatePromise()

defineExpose({
  start: () => TemplatePromise.start()
})
</script>

And then

<script setup>
const el = ref()

function call() {
  el.value?.start()
}
</script>

<template>
  <Foo ref="el"/>
</template>

[antoniogiroz]

Thanks @antfu!

That is already what I'm doing, but I was wondering if there was a better way.