#42 - wip

resources/js/Shared/Layout/AppLayout.vue

@@ -2,14 +2,6 @@
   <div class="min-h-full">
     <MainMenu />
     <main class="lg:ml-64 flex flex-col flex-1 py-8">
-      <SuccessAlert
-        v-if="flash.success"
-        :message="flash.success"
-      />
-      <ErrorAlert
-        v-if="flash.error"
-        :message="flash.error"
-      />
       <div>
         <slot />
       </div>
@@ -19,14 +11,12 @@
 
 <script>
 import MainMenu from '@/Shared/MainMenu'
-import SuccessAlert from '@/Shared/Alerts/SuccessAlert'
-import ErrorAlert from '@/Shared/Alerts/ErrorAlert'
+import {useToast} from 'vue-toastification'
+import {watch} from 'vue'
 
 export default {
   name: 'AppLayout',
   components: {
-    SuccessAlert,
-    ErrorAlert,
     MainMenu,
   },
   props: {
@@ -35,5 +25,22 @@ export default {
       default: () => null,
     },
   },
+  setup(props) {
+    const toast = useToast()
+
+    watch(() => props.flash, flash => {
+      if (flash.success) {
+        toast.success(flash.success)
+      }
+
+      if (flash.error) {
+        toast.error(flash.error)
+      }
+    }, {immediate:true})
+
+    return {
+      toast,
+    }
+  },
 }
 </script>

resources/js/Shared/Layout/GuestLayout.vue

@@ -1,23 +1,11 @@
 <template>
   <div class="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8 bg-blumilk-25">
-    <ErrorAlert
-      v-if="flash.error"
-      :message="flash.error"
-    />
     <slot />
   </div>
 </template>
 
 <script>
-import ErrorAlert from '@/Shared/Alerts/ErrorAlert'
 export default {
   name: 'GuestLayout',
-  components: {ErrorAlert},
-  props: {
-    flash: {
-      type: Object,
-      default: () => null,
-    },
-  },
 }
 </script>