Vue Crash Course Lesson 2 ~ Vue 3 Teleport (Aka Portals)

"Vue encourages us to build our UIs by encapsulating UI and related behavior into components. We can nest them inside one another to build a tree that makes up an application UI.

However, sometimes a part of a component’s template belongs to this component logically, while from a technical point of view, it would be preferable to move this part of the template somewhere else in the DOM, outside of the Vue app.

A common scenario for this is creating a component that includes a full-screen modal. In most cases, you’d want the modal’s logic to live within the component, but the positioning of the modal quickly becomes difficult to solve through CSS, or requires a change in component composition.

Consider the following HTML structure."

That’s straight from the docs, we’re about to implement the real world example. Let’s blow minds with Vue Teleportation Portals.

Vue 3 Crash Course Github Repository

https://github.com/zhorton34/vue3-cra…

#vue #vue3portals #vue3teleport #vue3crashcourse