Create vue-teleport.md

vue-teleport.md

@@ -0,0 +1,30 @@
+# Vue 3 Teleport
+
+<b>
+  Have you ever needed to render a Vue component outside of its parent component's DOM hierarchy?
+</b>
+Enter the Teleport component in Vue 3 - a game-changer for building modals, tooltips, and other UI elements that need to be rendered separately from their parent components.
+
+#### What is the Teleport Component?
+
+The Teleport component is a built-in feature in Vue 3 that allows you to render a component's content at a different location in the DOM hierarchy. This is particularly 
+useful when you need to create modals, tooltips, or other UI elements that should be rendered outside of the current component tree.
+
+#### Benefits of Using Teleport
+
+  - <b>Better Accessibility</b>: By rendering modals or tooltips at the root level of the DOM, you ensure that they are accessible to screen readers and other assistive technologies.
+  - <b>Improved CSS Styling</b>: When components are rendered outside of their parent components, they are not affected by the parent's CSS styles, making it easier to style them independently.
+  - <b>Easier Management</b>: Teleport makes it simpler to manage components that need to be rendered separately from their parent components, leading to cleaner and more maintainable code.
+
+#### Using Teleport in Vue 3
+
+To use the Teleport component, you need to provide it with two essential pieces of information:
+  1. The content to be teleported: This is the content (usually a Vue component) that you want to render at a different location in the DOM.
+  2. The target location: This is the CSS selector or HTML element where the content should be rendered.
+
+```
+<!-- can use any document selectors. -->
+<Teleport to="body">
+  <modal-component></modal-component>
+</Teleport>
+```