Passage à Laravel 10 pour Fortify Bootstrap

resources/js/app.js

@@ -1 +1,11 @@
-import './bootstrap';
+require('./bootstrap');
+
+import { createApp } from 'vue'
+import ExampleComponent from "./components/ExampleComponent.vue";
+
+const app = createApp({});
+
+app.component("ExampleComponent", ExampleComponent);
+
+app.mount("#app");
+

resources/js/bootstrap.js

@@ -1,4 +1,36 @@
-import axios from 'axios';
-window.axios = axios;
+window._ = require('lodash');
+
+/**
+ * Bootstrap 
+ */
+
+try {
+    require('bootstrap');
+} catch (e) {}
+
+/**
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
+ */
+
+window.axios = require('axios');
 
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+/**
+ * Echo exposes an expressive API for subscribing to channels and listening
+ * for events that are broadcast by Laravel. Echo and event broadcasting
+ * allows your team to easily build robust real-time web applications.
+ */
+
+// import Echo from 'laravel-echo';
+
+// window.Pusher = require('pusher-js');
+
+// window.Echo = new Echo({
+//     broadcaster: 'pusher',
+//     key: process.env.MIX_PUSHER_APP_KEY,
+//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
+//     forceTLS: true
+// });

resources/js/components/ExampleComponent.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="container">
+        <div class="row justify-content-center">
+            <div class="col-md-8">
+                <div class="card">
+                    <div class="card-header">Example Component</div>
+
+                    <div class="card-body">
+                        I'm an example component.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { onMounted } from "vue"
+
+onMounted(() => {
+    console.log('Component mounted.')
+})
+</script>