Add async/teleport components and provide/inject

content/roadmaps/105-vue/content/101-advanced-topics/107-async-components.md

@@ -1 +1,6 @@
-# Async components
+# 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>

content/roadmaps/105-vue/content/101-advanced-topics/108-teleport-components.md

@@ -1 +1,6 @@
-# Teleport components
+# 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>

content/roadmaps/105-vue/content/101-advanced-topics/109-provide-inject.md

@@ -1 +1,7 @@
-# Provide inject
+# 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>
+