11.2 Add the Search Bar Markup

src/components/Tasks/NoTasks.vue

@@ -5,7 +5,10 @@
     </template>
       No tasks to do today!
     <template v-slot:action>
-    <q-btn flat color="primary" label="Add Task" />
+    <q-btn
+      @click="$root.$emit('showAddTask')"
+      flat color="primary"
+      label="Add Task" />
     </template>
   </q-banner>
 </template>

src/components/Tasks/Tools/Search.vue

@@ -0,0 +1,32 @@
+<template>
+  <q-input
+    outlined
+    v-model="searchField"
+    class="col"
+    label="Search" >
+    <template v-slot:append>
+      <q-icon
+        v-if="searchField !== ''"
+        name="close"
+        @click="searchField = ''"
+        clas="cursor-pointer" />
+      <q-icon name="search" />
+    </template>
+  </q-input>
+</template>
+
+<script>
+export default {
+  name: 'Search',
+  data () {
+    return {
+      searchField: ''
+    }
+  }
+
+}
+</script>
+
+<style>
+
+</style>

src/pages/PageTodo.vue

@@ -1,5 +1,10 @@
 <template>
   <q-page class="q-pa-md">
+
+    <div class="row q-mb-lg">
+      <search />
+    </div>
+
     <noTasks
       v-if="!Object.keys(tasksTodo).length" />
 
@@ -34,6 +39,7 @@ import tasksTodo from 'components/Tasks/TasksTodo.vue'
 import noTasks from 'components/Tasks/NoTasks.vue'
 import tasksCompleted from 'components/Tasks/TasksCompleted.vue'
 import addTask from 'components/Tasks/Modals/AddTask.vue'
+import search from 'components/Tasks/Tools/Search.vue'
 
 export default {
   name: 'PageTodo',
@@ -41,7 +47,8 @@ export default {
     tasksTodo,
     tasksCompleted,
     addTask,
-    noTasks
+    noTasks,
+    search
   },
   data () {
     return {