Add content for components section

content/roadmaps/105-vue/content/100-fundamental-topics/101-components/101-component-registration.md

@@ -1 +1,6 @@
-# Component registration
+# Component Registration
+
+A Vue component needs to be "registered" so that Vue knows where to locate its implementation when it is encountered in a template. There are two ways to register components: global and local.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://vuejs.org/guide/components/registration.html'>Component Registration</BadgeLink>

content/roadmaps/105-vue/content/100-fundamental-topics/101-components/102-props.md

@@ -1 +1,11 @@
-# Props
+# Props
+
+If we are building a blog, we will likely need a component representing a blog post. We want all the blog posts to share the same visual layout, but with different content. Such a component won't be useful unless you can pass data to it, such as the title and content of the specific post we want to display. That's where props come in.
+
+Props are custom attributes you can register on a component. 
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://vuejs.org/guide/essentials/component-basics.html#passing-props'>Props Basics</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://vuejs.org/guide/components/props.html'>Props in Depth</BadgeLink>
+
+

content/roadmaps/105-vue/content/100-fundamental-topics/101-components/103-events.md

@@ -1 +1,8 @@
-# Events
+# Events
+
+As we develop our applications we may need to communicate with the parent component in order to notify of some actions e.g. when a user clicks on a button. In order to do this we need to use events.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/guide/essentials/component-basics.html#listening-to-events'>Listening to Events</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/guide/components/events.html'>Events in Detail</BadgeLink>
+

content/roadmaps/105-vue/content/100-fundamental-topics/101-components/104-attribute-inheritance.md

@@ -1 +1,7 @@
-# Attribute inheritance
+# Attribute Inheritance
+
+Attribute inheritance aka "fallthrough attributes" is a feature of Vue.js that allows you to inherit attributes from a parent component.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/guide/components/attrs.html'>Fallthrough Attributes</BadgeLink>
+