client/src/App.vue

@@ -1,21 +1,9 @@
-<template>
-  <div>
-    <header-bar></header-bar>
-    <b-container>
-      <b-row class="mt-5">
-        <router-view />
-      </b-row>
-    </b-container>
-  </div>
-</template>
 
 <script setup lang="ts">
+import Header from './components/Header.vue'
+</script>
 
-import Header from "@/components/Header.vue";
-
-export default {
-  components: {
-    Header,
-  },
-};
-</script>
+<template>
+  <h1>Here is a child component!</h1>
+  <Header />
+</template>

client/src/components/Header.vue

@@ -1,21 +1,10 @@
 
-<template>
-  <b-navbar toggleable="lg" type="dark" variant="primary">
-    <b-container>
-      <b-row class="text-white">
-        <b-col>
-          <b-icon-people-fill class="h2"></b-icon-people-fill>
-        </b-col>
-        <b-col>
-          <span class="h3">CRM</span>
-        </b-col>
-      </b-row>
-    </b-container>
-  </b-navbar>
-</template>
-
 <script setup lang="ts">
-export default {
-  name: "Header"
-};
+import { ref } from 'vue'
+
+const count = ref(0)
 </script>
+
+<template>
+  <button @click="count++">You clicked me {{ count }} times.</button>
+</template>