From 42c34072a949d40d06426f33538fc8708bad9201 Mon Sep 17 00:00:00 2001
From: Qazi Wahaj <qw_wahaj@yahoo.com>
Date: Fri, 30 Oct 2020 20:46:25 +0500
Subject: [PATCH 1/3] chore : slots in vue js

---
 source/snippets/vue/index.md | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/source/snippets/vue/index.md b/source/snippets/vue/index.md
index bfdef3c..0a50918 100644
--- a/source/snippets/vue/index.md
+++ b/source/snippets/vue/index.md
@@ -96,3 +96,34 @@ Basic Vue Component Scaffold.
   }
 </script>
 ```
+<!-- ## Slots in Vue -->
+
+### Slots in Vue
+
+Question : What is slots in vue js ?
+Answer : Slots are a mechanism for Vue components that allows you to compose your components in a way other than the strict parent-child relationship. Slots give you an outlet to place content in new places or make components more generic
+In other way we can say slots can be use to place any content inside children from parent, let see in above example : 
+
+```html
+// child.vue
+<template>
+  <div class="child">
+    <slot></slot>
+  </div>
+</template>
+```
+
+Here is simple child component which has slots inside. let's move to the parent component which App.vue,
+
+```html
+// app.vue
+<template>
+<child>
+<img src="an-image.jpg">
+</child>
+</template>
+```
+
+So simply we're using child component in App.vue(parent component) & passing it an image element as a slot so
+it will render inside child component & replace `<slot></slot>` to the image element.
+So we can pass anything through the slots.

From 51813fb8cf80439a71e03f35e4648af300a5f34b Mon Sep 17 00:00:00 2001
From: Qazi Wahaj <qw_wahaj@yahoo.com>
Date: Fri, 30 Oct 2020 21:22:09 +0500
Subject: [PATCH 2/3] resolved conflicts

---
 source/snippets/vue/index.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/source/snippets/vue/index.md b/source/snippets/vue/index.md
index 0a50918..3ef19cf 100644
--- a/source/snippets/vue/index.md
+++ b/source/snippets/vue/index.md
@@ -96,6 +96,7 @@ Basic Vue Component Scaffold.
   }
 </script>
 ```
+
 <!-- ## Slots in Vue -->
 
 ### Slots in Vue

From 255e687f9a3780f409089e4021325ff833206bb8 Mon Sep 17 00:00:00 2001
From: Qazi Wahaj <qw_wahaj@yahoo.com>
Date: Fri, 30 Oct 2020 21:29:28 +0500
Subject: [PATCH 3/3] resolved conflicts

---
 source/snippets/vue/index.md | 94 +++++++++++++++++++++++++++++++++++-
 1 file changed, 93 insertions(+), 1 deletion(-)

diff --git a/source/snippets/vue/index.md b/source/snippets/vue/index.md
index 3ef19cf..033d0d9 100644
--- a/source/snippets/vue/index.md
+++ b/source/snippets/vue/index.md
@@ -97,7 +97,99 @@ Basic Vue Component Scaffold.
 </script>
 ```
 
-<!-- ## Slots in Vue -->
+### Component with conditional template
+
+```html
+<template>
+  <div id="app">
+    <div>
+      Click the button to show/hide the text!
+    </div>
+    <p v-if="show">Hey I'm visible</p>
+    <button @click="toggleShow"></button>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'App',
+    data() {
+      return {
+        show: true,
+      };
+    },
+    methods:{
+      toggleShow(){
+        this.show = !this.show
+      }
+    }
+  }
+</script>
+```
+
+### Component using Vue 3 Composition API
+
+Basic Vue Component with Vue 3 Composition API.
+
+```html
+<template>
+  <div id="app">
+    Hello {{name}}!
+  </div>
+</template>
+
+<script>
+  import { ref } from 'vue';
+
+  export default {
+    name: 'App',
+    setup(props, context) {
+      const name = ref('world');
+      return {
+        name
+      }
+    }
+  }
+</script>
+
+<style>
+
+</style>
+```
+
+### Component using Vue 3 Composition API with click event and data binding
+
+```html
+<template>
+  <div id="app">
+    <button type="button" @click="onClick">Increment (Clicked: {{clicks}})</button>
+  </div>
+</template>
+
+<script>
+  import { ref } from 'vue';
+
+  export default {
+    name: 'App',
+    setup(props, context) {
+      const clicks = ref(0);
+
+      function onClick() {
+        clicks.value++;
+      }
+
+      return {
+        clicks,
+        onClick
+      }
+    }
+  }
+</script>
+
+<style>
+
+</style>
+```
 
 ### Slots in Vue