Add vue setup, test vue at home page

resources/js/components/ByeComponent.vue

@@ -0,0 +1,12 @@
+<template>
+  <bye-detail></bye-detail>
+</template>
+
+<script>
+import ByeDetail from "./ByeDetail.vue";
+export default {
+  components: {
+    "bye-detail": ByeDetail,
+  },
+};
+</script>

resources/js/components/ByeDetail.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>this is bye component using vuejs</div>
+</template>

resources/js/components/HelloComponent.vue

@@ -0,0 +1,12 @@
+<template>
+  <hello-detail></hello-detail>
+</template>
+
+<script>
+import HelloDetail from "./HelloDetail.vue";
+export default {
+  components: {
+    "hello-detail": HelloDetail,
+  },
+};
+</script>

resources/js/components/HelloDetail.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>this is hello detail component using vuejs</div>
+</template>

resources/js/vue-app.js

@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+
+import HelloComponent from "./components/HelloComponent.vue"
+import ByeComponent from "./components/ByeComponent.vue"
+
+const appHelloComponent = createApp(HelloComponent);
+const appByeComponent = createApp(ByeComponent);
+
+appHelloComponent.mount("#appHelloComponent");
+appByeComponent.mount("#appByeComponent");

resources/views/home.blade.php

@@ -15,7 +15,9 @@
 
                     <!-- {{ __('Selamat Datang!') }} -->
                     @hasrole('admin')
-                        I am a admin! 
+                        I am a admin!
+                        <div id="appHelloComponent"></div>
+                        <div id="appByeComponent"></div>
                     @endhasrole
                     @hasrole('khazanah')
                         I am a khazanah!

resources/views/layouts/app.blade.php

@@ -76,6 +76,7 @@
         </main>
     </div>
 
+    <script src="{{ asset('js/vue-app.js') }}"></script>
 
 </body>