Scaling UpLesson 31Free preview

Vue Teleport

This lesson is part of Vue · All levels

Summary

Teleport is a built-in Vue component that moves the template piece to another location within the DOM, outside the current component hierarchy. The most common case is capital, toast, and tooltip that should appear above everything without interfering with the property's overflow. Content remains a logical part of the original components even though it's in different places.

Key points

Teleporting transfers the content render to a specific DOM target.
Attributes to determine the teleport purpose, usually the outside element.
The logic of the component remains attached to the source, only its appearance is moved.
Suitable for capital, toast, and overlay.
The disabled attribute can temporarily disable teleport.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.