Search⌘ K

Teleport

Explore how to use the Teleport component in Nuxt 3 to move parts of your UI, such as modals, to different locations in the DOM. This lesson helps you understand organizing components for better readability while controlling their display for cleaner, more manageable layouts in dynamic applications.

We often create our components so they are organized for the developer to read and understand. This could lead to the possibility that we want to write some code in one component or page but display it in a different location in the DOM.

Teleport use cases

An example of this could be a modal. A modal is generally placed on top of the rest of the content. This requires CSS to pull it out of the flow of the ...