Skip to content

Use a Teleport for modals

Possibly inspired by Windows, Vue 3 introduces the Teleport, a built-in equivalent of Portal-Vue. This is explicitly designed for modals, because modals can lead to a whole lot of trouble with Vue's hierarchical component structure. Teleports allow to define some HTML in a component that will be rendered elsewhere, for example at the very end of the <body> tag, which is the best place to put a modal in in general. This could solve various CSS issues that can occur for modals inserted into weird spots, such as the ones for worker configurations and model version selection; they will no longer be affected by the CSS of the parent component, or passthrough any mouse or keyboard events that occur.