Add vue.js templates/directives and api styles docs

content/roadmaps/105-vue/content/100-fundamental-topics/102-templates.md

@@ -1 +1,6 @@
-# Templates
+# Templates
+
+Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data. All Vue templates are syntactically valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/guide/essentials/template-syntax.html'>Template Syntax</BadgeLink>

content/roadmaps/105-vue/content/100-fundamental-topics/103-directives.md

@@ -1 +1,7 @@
-# Directives
+# Directives
+
+Directives are special attributes with the `v-` prefix. Vue provides a number of [built-in directives](https://vuejs.org/api/built-in-directives.html).
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/guide/essentials/template-syntax.html#directives'>Directives Documentation</BadgeLink>
+

content/roadmaps/105-vue/content/100-fundamental-topics/104-api-styles/100-options-api.md

@@ -1 +1,10 @@
-# Options api
+# Options API
+
+We use Options API in a Vue application to write and define different components. With this API, we can use options such as data, methods, and mounted.
+
+To state it simply, Options API is an old way to structure a Vue.JS application. Due to some limitations in this API, Composition API was introduced in Vue 3.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://vuejs.org/guide/typescript/options-api.html'>TypeScript with Options API</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='API Documentation' href='https://vuejs.org/api/#options-api'>Options API Documentation</BadgeLink>
+

content/roadmaps/105-vue/content/100-fundamental-topics/104-api-styles/101-composition-api.md

@@ -1 +1,10 @@
-# Composition api
+# Composition API
+
+With the release of Vue 3, developers now have access to the Composition API, a new way to write Vue components. This API allows features to be grouped together logically, rather than having to organize your single-file components by function. Using the Composition API can lead to more readable code, and gives the developer more flexibility when developing their applications.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/guide/typescript/composition-api.html'>TypeScript with Composition API</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/guide/extras/composition-api-faq.html'>Composition API FAQ</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='API Docs' href='https://vuejs.org/api/#composition-api'>Composition API</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.thisdot.co/blog/vue-3-composition-api-ref-and-reactive'>Vue 3 Composition API</BadgeLink>
+

content/roadmaps/105-vue/content/100-fundamental-topics/104-api-styles/readme.md

@@ -1 +1,6 @@
-# Api styles
+# API Styles
+
+Up until Vue 2, there was one way to create components in Vue. With Vue 3, a new methodology was introduced called the Composition API. Now, if we want to make a component in Vue, we have two ways to do it. You might be wondering what the difference is, exactly, so let’s take a look at how the newer Composition API differs from the Vue 2 methodology, which is now known as the Options API
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://fjolt.com/article/vue-composition-api-vs-options-api'>The Difference Between the Composition API and Options API in Vue</BadgeLink>