Add vue setup, test vue at home page

package.json

@@ -28,6 +28,8 @@
         "datatables.net": "^1.11.3",
         "datatables.net-dt": "^1.11.3",
         "jquery-confirm": "^3.3.4",
-        "viewerjs": "^1.11.2"
+        "viewerjs": "^1.11.2",
+        "vue": "^3.2.13",
+        "vue-loader": "^17.0.1"
     }
 }

public/mix-manifest.json

@@ -1,4 +1,5 @@
 {
     "/js/app.js": "/js/app.js",
+    "/js/vue-app.js": "/js/vue-app.js",
     "/css/app.css": "/css/app.css"
 }

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

@@ -16,6 +16,8 @@
                     <!-- {{ __('Selamat Datang!') }} -->
                     @hasrole('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>
 

webpack.mix.js

@@ -12,5 +12,7 @@ const mix = require('laravel-mix');
  */
 
 mix.js('resources/js/app.js', 'public/js')
+    .js('resources/js/vue-app.js', 'public/js')
+    .vue()
     .sass('resources/sass/app.scss', 'public/css')
     .sourceMaps();