To teleport this modal into it, we wrap the modal we created above inside Vue’s tag and pass a to attribute to it. Recall that earlier, we provisioned a my-modal div element in the index.html file where we’ll teleport content to. It goes two levels deep from the container element with an ID of app into the div element with an ID of helloworld:
However, if we inspect the Open Modal button on the browser, you’ll notice that the button is deeply nested into the app container. If you run the app at this point, you will see the button to open the modal on the browser like so:
Teleport app how to#
To demonstrate how to teleport content into the target we just specified, let’s open the HelloWorld.vue file and create a simple modal: Within our Vue components, we can teleport elements into the my-modal div element using the ID CSS selector i.e my-modal. The green horizontal line indicates the position of the my-modal div element. Discover popular ORMs used in the TypeScript landscape.Explore Tauri, a new framework for building binaries.Learn how to animate your React app with AnimXYZ.Switch between multiple versions of Node.Use React's useEffect to optimize your application's performance.Don't miss a moment with The Replay, a curated newsletter from LogRocket.You can see we updated the my-modal div element to give it some colored borders. It is rendered directly below the app container that holds all our project files. What we’ve done here is define a div with an ID of my-modal.
Teleport app update#
To create the modal for this demo, let’s update the src/public/index.html file with the snippet below: If you have the Vue CLI installed, run the command below to create a new Vue project called vueteleport : vue create vueteleportįollow the terminal prompts and select the Vue 3 preset to complete the setup process. The process for creating Vue applications hasn’t changed.
Teleport app install#
Create a Vue appįirst, you need to install the latest version of Vue CLI v4.5 with the command below: yarn global add We are focusing on the Teleport feature of Vue 3 so we will not be covering Vue 3 basics. This tutorial is not an introduction to Vue 3. For this reason, the Vue team recommends putting it below the body tag in the index.html file of your public directory. This destination must be somewhere outside the component tree to avoid any kind of interference with other application’s UI components. The tag takes a to attribute that specifies where in the DOM you want to teleport an element to. All without worrying about managing global state or creating a fresh new component for the modal. It makes it possible for us to specify exactly where in the DOM we want to render the modal or any other piece of HTML. This behavior is troubling because components like modals can be invoked from different parts of the application, and we want to keep the modals position and styles consistent. If you use a modal inside a deeply nested element, for instance, the CSS properties on the parent will affect the styles on the modal. you will notice that their position in the DOM is important.
When you’re working with components like modals, notifications, etc.
If you’re wondering why this is necessary, then you’re asking the right question. Teleport makes it possible for developers to move elements from one place to another in a Vue application. During the early stages of Vue 3, this feature was called Portals but the Vue team eventually decided to call it Teleport. Vue 3 has an exciting new feature called Teleport. Peter Ekene Eze Follow Learn, Apply, Share Positioning elements with Vue 3 Teleport
0 kommentar(er)
