Update $page object to use $page.props

resources/js/Pages/Users/Edit.vue

@@ -88,7 +88,7 @@ export default {
         onStart: () => this.sending = true,
         onFinish: () => this.sending = false,
         onSuccess: () => {
-          if (Object.keys(this.$page.errors).length === 0) {
+          if (Object.keys(this.$page.props.errors).length === 0) {
             this.form.photo = null
             this.form.password = null
           }

resources/js/Shared/FlashMessages.vue

 <template>
   <div>
-    <div v-if="$page.flash.success && show" class="mb-8 flex items-center justify-between bg-green-500 rounded max-w-3xl">
+    <div v-if="$page.props.flash.success && show" class="mb-8 flex items-center justify-between bg-green-500 rounded max-w-3xl">
       <div class="flex items-center">
         <svg class="ml-4 mr-2 flex-shrink-0 w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polygon points="0 11 2 9 7 14 18 3 20 5 7 18" /></svg>
-        <div class="py-4 text-white text-sm font-medium">{{ $page.flash.success }}</div>
+        <div class="py-4 text-white text-sm font-medium">{{ $page.props.flash.success }}</div>
       </div>
       <button type="button" class="group mr-2 p-2" @click="show = false">
         <svg class="block w-2 h-2 fill-green-800 group-hover:fill-white" xmlns="http://www.w3.org/2000/svg" width="235.908" height="235.908" viewBox="278.046 126.846 235.908 235.908"><path d="M506.784 134.017c-9.56-9.56-25.06-9.56-34.62 0L396 210.18l-76.164-76.164c-9.56-9.56-25.06-9.56-34.62 0-9.56 9.56-9.56 25.06 0 34.62L361.38 244.8l-76.164 76.165c-9.56 9.56-9.56 25.06 0 34.62 9.56 9.56 25.06 9.56 34.62 0L396 279.42l76.164 76.165c9.56 9.56 25.06 9.56 34.62 0 9.56-9.56 9.56-25.06 0-34.62L430.62 244.8l76.164-76.163c9.56-9.56 9.56-25.06 0-34.62z" /></svg>
       </button>
     </div>
-    <div v-if="($page.flash.error || Object.keys($page.errors).length > 0) && show" class="mb-8 flex items-center justify-between bg-red-500 rounded max-w-3xl">
+    <div v-if="($page.props.flash.error || Object.keys($page.props.errors).length > 0) && show" class="mb-8 flex items-center justify-between bg-red-500 rounded max-w-3xl">
       <div class="flex items-center">
         <svg class="ml-4 mr-2 flex-shrink-0 w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm1.41-1.41A8 8 0 1 0 15.66 4.34 8 8 0 0 0 4.34 15.66zm9.9-8.49L11.41 10l2.83 2.83-1.41 1.41L10 11.41l-2.83 2.83-1.41-1.41L8.59 10 5.76 7.17l1.41-1.41L10 8.59l2.83-2.83 1.41 1.41z" /></svg>
-        <div v-if="$page.flash.error" class="py-4 text-white text-sm font-medium">{{ $page.flash.error }}</div>
+        <div v-if="$page.props.flash.error" class="py-4 text-white text-sm font-medium">{{ $page.props.flash.error }}</div>
         <div v-else class="py-4 text-white text-sm font-medium">
-          <span v-if="Object.keys($page.errors).length === 1">There is one form error.</span>
-          <span v-else>There are {{ Object.keys($page.errors).length }} form errors.</span>
+          <span v-if="Object.keys($page.props.errors).length === 1">There is one form error.</span>
+          <span v-else>There are {{ Object.keys($page.props.errors).length }} form errors.</span>
         </div>
       </div>
       <button type="button" class="group mr-2 p-2" @click="show = false">
@@ -33,7 +33,7 @@ export default {
     }
   },
   watch: {
-    '$page.flash': {
+    '$page.props.flash': {
       handler() {
         this.show = true
       },

resources/js/Shared/Layout.vue

@@ -16,17 +16,17 @@
             </dropdown>
           </div>
           <div class="bg-white border-b w-full p-4 md:py-0 md:px-12 text-sm md:text-md flex justify-between items-center">
-            <div class="mt-1 mr-4">{{ $page.auth.user.account.name }}</div>
+            <div class="mt-1 mr-4">{{ $page.props.auth.user.account.name }}</div>
             <dropdown class="mt-1" placement="bottom-end">
               <div class="flex items-center cursor-pointer select-none group">
                 <div class="text-gray-700 group-hover:text-indigo-600 focus:text-indigo-600 mr-1 whitespace-no-wrap">
-                  <span>{{ $page.auth.user.first_name }}</span>
-                  <span class="hidden md:inline">{{ $page.auth.user.last_name }}</span>
+                  <span>{{ $page.props.auth.user.first_name }}</span>
+                  <span class="hidden md:inline">{{ $page.props.auth.user.last_name }}</span>
                 </div>
                 <icon class="w-5 h-5 group-hover:fill-indigo-600 fill-gray-700 focus:fill-indigo-600" name="cheveron-down" />
               </div>
               <div slot="dropdown" class="mt-2 py-2 shadow-xl bg-white rounded text-sm">
-                <inertia-link class="block px-6 py-2 hover:bg-indigo-500 hover:text-white" :href="route('users.edit', $page.auth.user.id)">My Profile</inertia-link>
+                <inertia-link class="block px-6 py-2 hover:bg-indigo-500 hover:text-white" :href="route('users.edit', $page.props.auth.user.id)">My Profile</inertia-link>
                 <inertia-link class="block px-6 py-2 hover:bg-indigo-500 hover:text-white" :href="route('users')">Manage Users</inertia-link>
                 <inertia-link class="block px-6 py-2 hover:bg-indigo-500 hover:text-white" :href="route('logout')" method="post">Logout</inertia-link>
               </div>