diff --git a/vue-teleport.md b/vue-teleport.md
new file mode 100644
index 0000000..86b5feb
--- /dev/null
+++ b/vue-teleport.md
@@ -0,0 +1,30 @@
+# Vue 3 Teleport
+
+
+ Have you ever needed to render a Vue component outside of its parent component's DOM hierarchy?
+
+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
+
+ - Better Accessibility: 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.
+ - Improved CSS Styling: 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.
+ - Easier Management: 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.
+
+```
+
+
+
+
+```