I always see modals taught this way, but personally I've been using a different pattern for a while and I think it's much better. I wonder why it isn't more widespread.

I don't like the idea of having modals in the html/template where they don't belong. Sure, that is solved using teleport and similar techniques as introduced in this lesson. But I still don't like that they still have to be written in some other component.

What I do instead is that in my root <App> component I have a <component :is="modal.component" v-bind="modal.props" />, and then when I want to show a modal I have a openModal(MyModalComponent, { title: '...' }) function. This function just sets the modal component and properties in pinia/vuex, and that's how it's read in the root of the app.

I specially like that idea because you can also wrap the modal result in a promise that resolves when the modal is closed, and do something like this:

const user = await openModal(CreateUserModal);

// do something with "user"

Any thoughts @jeffreyway ?

Teleporting