diff --git a/content/roadmaps/105-vue/content/101-advanced-topics/110-custom-directives.md b/content/roadmaps/105-vue/content/101-advanced-topics/110-custom-directives.md
index 0f2eb78b2..9e3d3e3f8 100644
--- a/content/roadmaps/105-vue/content/101-advanced-topics/110-custom-directives.md
+++ b/content/roadmaps/105-vue/content/101-advanced-topics/110-custom-directives.md
@@ -1 +1,6 @@
-# Custom directives
\ No newline at end of file
+# Custom Directives
+
+So far you may have covered two forms of code reuse in Vue: [components](https://vuejs.org/guide/essentials/component-basics.html) and [composables](https://vuejs.org/guide/reusability/composables.html). Components are the main building blocks, while composables are focused on reusing stateful logic. Custom directives, on the other hand, are mainly intended for reusing logic that involves low-level DOM access on plain elements.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/guide/reusability/custom-directives.html'>Custom Directives</BadgeLink>