Use the Vue composition API (#81)

* Update NPM dependencies

* Update Show.vue

* Update Show.vue

* Update Show.vue

* Update Edit.vue

* Update RegisterController.php

* Update Show.vue

* Update Index.vue

* Update Index.vue

* Update Edit.vue

* Make logo clickable

* Update Header.vue

* Update App.vue

* Update Notice.vue

Author: SebKay

app/Http/Controllers/RegisterController.php

@@ -5,6 +5,7 @@
 use App\Enums\Role;
 use App\Http\Requests\Register\RegisterStoreRequest;
 use App\Models\User;
+use Filament\Events\Auth\Registered;
 
 class RegisterController extends Controller
 {
@@ -29,6 +30,8 @@ public function store(RegisterStoreRequest $request)
 
         auth()->guard()->loginUsingId($user->id);
 
+        event(new Registered($user));
+
         return redirect()->route('home');
     }
 }

bun.lockb

@@ -6,18 +6,18 @@
     "build": "vite build"
   },
   "devDependencies": {
-    "@heroicons/vue": "^2.1.3",
-    "@inertiajs/vue3": "^1.1.0",
-    "@tailwindcss/forms": "^0.5.7",
-    "@vitejs/plugin-vue": "^5.0.5",
-    "autoprefixer": "^10.4.19",
-    "laravel-vite-plugin": "^1.0.4",
-    "postcss": "^8.4.38",
-    "sass": "^1.77.4",
-    "tailwindcss": "^3.4.4",
-    "vite": "^5.2.13",
+    "@heroicons/vue": "^2.1.5",
+    "@inertiajs/vue3": "^1.2.0",
+    "@tailwindcss/forms": "^0.5.9",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "autoprefixer": "^10.4.20",
+    "laravel-vite-plugin": "^1.0.5",
+    "postcss": "^8.4.47",
+    "sass": "^1.79.1",
+    "tailwindcss": "^3.4.12",
+    "vite": "^5.4.6",
     "vite-svg-loader": "^5.1.0",
-    "vue": "^3.4.27",
-    "@sentry/vue": "^7.40.0"
+    "vue": "^3.5.6",
+    "@sentry/vue": "^8.30.0"
   }
 }

package.json

@@ -4,9 +4,9 @@
             <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                 <div class="flex h-16 items-center justify-between">
                     <div class="flex items-center">
-                        <div class="flex-shrink-0">
-                            <SparklesIcon class="h-8 w-8" />
-                        </div>
+                        <Link :href="route('home')">
+                        <SparklesIcon class="h-8 w-8 flex-shrink-0" />
+                        </Link>
                     </div>
 
                     <div class="hidden md:block">
@@ -80,16 +80,12 @@
     </header>
 </template>
 
-<script>
-    export default {
-        props: {
-            menu: Array,
-        },
+<script setup>
+    import { ref } from 'vue';
+
+    const props = defineProps({
+        menu: Array,
+    });
 
-        data() {
-            return {
-                mobileMenuOpen: false,
-            };
-        },
-    };
+    const mobileMenuOpen = ref(false);
 </script>

resources/js/Components/Header.vue

@@ -18,67 +18,54 @@
     </div>
 </template>
 
-<script>
+<script setup>
+    import { ref, onMounted } from 'vue';
     import { router } from "@inertiajs/vue3";
 
-    export default {
-        data() {
-            return {
-                active: false,
-                icon: "",
-                type: "",
-                message: "",
-            };
-        },
+    const active = ref(false);
+    const icon = ref("");
+    const type = ref("");
+    const message = ref("");
 
-        mounted() {
-            router.on('finish', () => {
-                let error = Object.values(router.page.props.errors)[0] || null;
-                let type = null;
-                let message = null;
+    onMounted(() => {
+        router.on('finish', () => {
+            let error = Object.values(router.page.props.errors)[0] || router.page.props.error;
 
-                if (router.page.props.success) {
-                    type = "success";
-                    message = router.page.props.success;
-                } else if (router.page.props.error) {
-                    type = "error";
-                    error = router.page.props.error;
-                } else if (router.page.props.warning) {
-                    type = "warning";
-                    message = router.page.props.warning;
-                }
+            if (router.page.props.success) {
+                icon.value = "CheckCircleIcon";
+                type.value = "success";
+                message.value = router.page.props.success;
+            } else if (error) {
+                icon.value = "XCircleIcon";
+                type.value = "error";
+                message.value = error;
+            } else if (router.page.props.warning) {
+                icon.value = "ExclamationCircleIcon";
+                type.value = "warning";
+                message.value = router.page.props.warning;
+            }
 
-                if (message) {
-                    this.setNotice(message, type);
-                } else if (error) {
-                    this.setNotice(error, "error");
-                }
-            });
-        },
+            setActive();
+        });
+    });
 
-        methods: {
-            setNotice(message, type) {
-                this.type = type;
-                this.message = message;
+    function reset() {
+        icon.value = "";
+        type.value = "";
+        message.value = "";
+    }
 
-                if (type === "success") {
-                    this.icon = "CheckCircleIcon";
-                } else if (type === "error") {
-                    this.icon = "XCircleIcon";
-                } else if (type === "warning") {
-                    this.icon = "ExclamationCircleIcon";
-                }
+    function setActive() {
+        if (!type && !message) {
+            return;
+        }
 
-                this.setActive();
-            },
+        active.value = true;
 
-            setActive() {
-                this.active = true;
+        setTimeout(() => {
+            active.value = false;
 
-                setTimeout(() => {
-                    this.active = false;
-                }, 4000);
-            },
-        },
+            reset();
+        }, 4000);
     };
 </script>

resources/js/Components/Notice.vue

@@ -1,4 +1,5 @@
 <template>
+
     <Head>
         <title></title>
     </Head>
@@ -16,73 +17,61 @@
     <Notice />
 </template>
 
-<script>
-    import { router } from "@inertiajs/core";
+<script setup>
+    import { ref, computed, onMounted } from "vue";
+    import { usePage, router } from '@inertiajs/vue3'
 
     import Header from "@js/Components/Header.vue";
     import Notice from "@js/Components/Notice.vue";
 
-    export default {
-        name: "App Layout",
-
-        components: {
-            Header,
-            Notice,
-        },
+    const page = usePage();
 
-        data() {
-            return {
-                mobileMenuOpen: false,
-            };
-        },
+    const mobileMenuOpen = ref(false);
 
-        computed: {
-            menu() {
-                if (this.$page.props.auth.loggedIn) {
-                    return [
-                        {
-                            label: "Dashboard",
-                            route: route("home"),
-                            condition: true,
-                            components: ['Dashboard/Index'],
-                        },
-                        {
-                            label: "Account",
-                            route: route("account.edit"),
-                            condition: true,
-                            components: ['Account/Edit', 'EmailVerification/Show'],
-                        },
-                        {
-                            label: "Logout",
-                            route: route("logout"),
-                            method: "post",
-                            condition: true,
-                            components: [],
-                        },
-                    ];
-                }
+    const menu = computed(() => {
+        if (page.props.auth.loggedIn) {
+            return [
+                {
+                    label: "Dashboard",
+                    route: route("home"),
+                    condition: true,
+                    components: ['Dashboard/Index'],
+                },
+                {
+                    label: "Account",
+                    route: route("account.edit"),
+                    condition: true,
+                    components: ['Account/Edit', 'EmailVerification/Show'],
+                },
+                {
+                    label: "Logout",
+                    route: route("logout"),
+                    method: "post",
+                    condition: true,
+                    components: [],
+                },
+            ];
+        }
 
-                return [
-                    {
-                        label: "Login",
-                        route: route("login"),
-                        condition: true,
-                        components: ['Login/Show'],
-                    },
-                    {
-                        label: "Register",
-                        route: route("register"),
-                        condition: true,
-                        components: ['Register/Show'],
-                    },
-                ];
+        return [
+            {
+                label: "Login",
+                route: route("login"),
+                condition: true,
+                components: ['Login/Show'],
+            },
+            {
+                label: "Register",
+                route: route("register"),
+                condition: true,
+                components: ['Register/Show'],
             },
-        },
+        ];
+    });
 
-        mounted() {
-            router.on("success", () => {
-                this.mobileMenuOpen = false;
-            });
-        },
-    };
+    onMounted(() => {
+        router.on("success", () => {
+            mobileMenuOpen.value = false;
+        });
+    });
 </script>