From 523e898cb919b244d56f7efb722a26c7a90e9d1d Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 9 Aug 2022 22:35:30 +0400
Subject: [PATCH] Add async/teleport components and provide/inject

---
 .../content/101-advanced-topics/107-async-components.md   | 7 ++++++-
 .../101-advanced-topics/108-teleport-components.md        | 7 ++++++-
 .../content/101-advanced-topics/109-provide-inject.md     | 8 +++++++-
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/content/roadmaps/105-vue/content/101-advanced-topics/107-async-components.md b/content/roadmaps/105-vue/content/101-advanced-topics/107-async-components.md
index ec26c075b..def262249 100644
--- a/content/roadmaps/105-vue/content/101-advanced-topics/107-async-components.md
+++ b/content/roadmaps/105-vue/content/101-advanced-topics/107-async-components.md
@@ -1 +1,6 @@
-# Async components
\ No newline at end of file
+# Async Components
+
+In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's needed. To make that possible, Vue has a `defineAsyncComponent` function.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/guide/components/async.html'>Async Components</BadgeLink>
diff --git a/content/roadmaps/105-vue/content/101-advanced-topics/108-teleport-components.md b/content/roadmaps/105-vue/content/101-advanced-topics/108-teleport-components.md
index 8eac6d6a3..8c7ffe277 100644
--- a/content/roadmaps/105-vue/content/101-advanced-topics/108-teleport-components.md
+++ b/content/roadmaps/105-vue/content/101-advanced-topics/108-teleport-components.md
@@ -1 +1,6 @@
-# Teleport components
\ No newline at end of file
+# Teleport Components
+
+Sometimes we may run into the following scenario: a part of a component's template belongs to it logically, but from a visual standpoint, it should be displayed somewhere else in the DOM, outside of the Vue application. This is where the `<Teleport>` component comes in.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/guide/built-ins/teleport.html'>Teleport Components</BadgeLink>
diff --git a/content/roadmaps/105-vue/content/101-advanced-topics/109-provide-inject.md b/content/roadmaps/105-vue/content/101-advanced-topics/109-provide-inject.md
index 959ae7aaa..6a628b9c8 100644
--- a/content/roadmaps/105-vue/content/101-advanced-topics/109-provide-inject.md
+++ b/content/roadmaps/105-vue/content/101-advanced-topics/109-provide-inject.md
@@ -1 +1,7 @@
-# Provide inject
\ No newline at end of file
+# Provide / Inject
+
+Usually, when we need to pass data from the parent to a child component, we use props. However, imagine the case where we have a large component tree, and a deeply nested component needs something from a distant ancestor component. With only props, we would have to pass the same prop across the entire parent chain. We can solve props drilling with `provide` and `inject`.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/guide/components/provide-inject.html'>Provide / Inject in Vue.js</BadgeLink>
+