And this has to be an element in the DOM where you want this to be teleported to. So in our case, let's just say Destination, and let's close out, oops, let's close out the Teleport here, okay. And now this is not going to render because it's trying to teleport it to that component, or to that div. So let's go ahead and make that. So in the Portal Vue library in Vue 2, you can define this target anywhere in your application. However, in Vue 3, you have to define it outside of the context of this Vue app. So if we open up index.html, we have to define it somewhere outside of this div.id app. So I was actually stuck on this for a while until I read the RFC.

So if we open up index.html, we have to define it somewhere outside of this div.id app. So I was actually stuck on this for a while until I read the RFC. If you scroll down, all the way down here, you'll see the section that says using a teleport on an element within a Vue app. And if you read the last sentence, it says teleporting to any DOM element that is controlled by Vue is considered to be an anti-pattern because there can be issues where the real DOM and virtual DOM are out of sync. So yeah, make sure to remember your target has to be outside of this div.id of app. So let's go ahead and do that. So we named it Destination, so let's say Destination.

So let's go ahead and do that. So we named it Destination, so let's say Destination. And now this should be rendered outside of this component. So let's go ahead and take a look at another example here. So I have this model component here. Sorry, I have another component called Another. And this component has a model. And the model has just a button that emits an event. And then the parent component can close that model after that event happens. So let's go ahead and go into app and put this component in.

for styling related things like I just showed you. And it also says it's common pattern to put these elements right before the end of the body tag. So let's go ahead and do that in our component. So I'm going to put this back nested, but you can leave it there if you want. Again, let's do the same thing here. Let's make a teleport component, say to. And you can even make this a binding and do this programmatically if you want to. But in our case, we'll just stick to a querySelector here. We'll say modalTarget.

But in our case, we'll just stick to a querySelector here. We'll say modalTarget. And let's go ahead and close out that component. Okay. And let's make this modalTarget in our index.html up here. Just duplicate this and say modalTarget. And now this modal should no longer inherit the transparent style, and it should no longer inherit the big text. So there we go. Just to show you that it is being teleported correctly to the correct target.

So there we go. Just to show you that it is being teleported correctly to the correct target. If you open up DevTools, you'll see that we have this modal target, and you can see that code in there. So it does work correctly. So, yeah, if you run into cases where you need to render some of your code in a different part of the DOM, definitely check out teleport.