From f85311ecced84bf501370574b0e7a5f2b62f2cdc Mon Sep 17 00:00:00 2001
From: Ahmed Kandil <sa@tomorrowsystem.com>
Date: Thu, 22 Apr 2021 15:58:48 +0200
Subject: [PATCH] Fix Vue warning

When visiting forgot-password page there is a console [Vue warn]: Extraneous non-props attributes (errors, auth) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
The reason is [Attribute Inheritance on Multiple Root Nodes](https://v3.vuejs.org/guide/component-attrs.html#attribute-inheritance-on-multiple-root-nodes)

Inertia shares `errors` as a prop by default and Breeze shares `auth` as a prop by default. If those props are not explicitly defined on each page component a Vue runtime warning will be issued.

We can wrap all the root nodes of the page component in a `<div>` to create a single root component and get rid of the warning, But those props will be inherited as [Non-Prop Attributes](https://v3.vuejs.org/guide/component-attrs.html#non-prop-attributes) resulting in `<div errors="[object Object]" auth="[object Object]">`

Suggested solution : explicitly define `errors` and `auth` as props on each page component.
---
 stubs/inertia/resources/js/Pages/Auth/ConfirmPassword.vue | 5 +++++
 stubs/inertia/resources/js/Pages/Auth/ForgotPassword.vue  | 4 +++-
 stubs/inertia/resources/js/Pages/Auth/Register.vue        | 5 +++++
 stubs/inertia/resources/js/Pages/Auth/ResetPassword.vue   | 2 ++
 stubs/inertia/resources/js/Pages/Auth/VerifyEmail.vue     | 4 +++-
 stubs/inertia/resources/js/Pages/Dashboard.vue            | 5 +++++
 stubs/inertia/resources/js/Pages/Welcome.vue              | 2 ++
 7 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/stubs/inertia/resources/js/Pages/Auth/ConfirmPassword.vue b/stubs/inertia/resources/js/Pages/Auth/ConfirmPassword.vue
index 6dc167997..b620c5ad9 100644
--- a/stubs/inertia/resources/js/Pages/Auth/ConfirmPassword.vue
+++ b/stubs/inertia/resources/js/Pages/Auth/ConfirmPassword.vue
@@ -36,6 +36,11 @@
             BreezeValidationErrors,
         },
 
+        props: {
+            auth: Object,
+            errors: Object,
+        },
+
         data() {
             return {
                 form: this.$inertia.form({
diff --git a/stubs/inertia/resources/js/Pages/Auth/ForgotPassword.vue b/stubs/inertia/resources/js/Pages/Auth/ForgotPassword.vue
index 3c58550ea..c3a5c460d 100644
--- a/stubs/inertia/resources/js/Pages/Auth/ForgotPassword.vue
+++ b/stubs/inertia/resources/js/Pages/Auth/ForgotPassword.vue
@@ -41,7 +41,9 @@
         },
 
         props: {
-            status: String
+            auth: Object,
+            errors: Object,
+            status: String,
         },
 
         data() {
diff --git a/stubs/inertia/resources/js/Pages/Auth/Register.vue b/stubs/inertia/resources/js/Pages/Auth/Register.vue
index d4b5d51fa..1ae846f92 100644
--- a/stubs/inertia/resources/js/Pages/Auth/Register.vue
+++ b/stubs/inertia/resources/js/Pages/Auth/Register.vue
@@ -51,6 +51,11 @@
             BreezeValidationErrors,
         },
 
+        props: {
+            auth: Object,
+            errors: Object,
+        },
+
         data() {
             return {
                 form: this.$inertia.form({
diff --git a/stubs/inertia/resources/js/Pages/Auth/ResetPassword.vue b/stubs/inertia/resources/js/Pages/Auth/ResetPassword.vue
index 35663e9d6..13ce8b1ae 100644
--- a/stubs/inertia/resources/js/Pages/Auth/ResetPassword.vue
+++ b/stubs/inertia/resources/js/Pages/Auth/ResetPassword.vue
@@ -43,7 +43,9 @@
         },
 
         props: {
+            auth: Object,
             email: String,
+            errors: Object,
             token: String,
         },
 
diff --git a/stubs/inertia/resources/js/Pages/Auth/VerifyEmail.vue b/stubs/inertia/resources/js/Pages/Auth/VerifyEmail.vue
index 55508fa08..97378b757 100644
--- a/stubs/inertia/resources/js/Pages/Auth/VerifyEmail.vue
+++ b/stubs/inertia/resources/js/Pages/Auth/VerifyEmail.vue
@@ -30,7 +30,9 @@
         },
 
         props: {
-            status: String
+            auth: Object,
+            errors: Object,
+            status: String,
         },
 
         data() {
diff --git a/stubs/inertia/resources/js/Pages/Dashboard.vue b/stubs/inertia/resources/js/Pages/Dashboard.vue
index c25ec4284..115923e2c 100644
--- a/stubs/inertia/resources/js/Pages/Dashboard.vue
+++ b/stubs/inertia/resources/js/Pages/Dashboard.vue
@@ -25,5 +25,10 @@
         components: {
             BreezeAuthenticatedLayout,
         },
+
+        props: {
+            auth: Object,
+            errors: Object,
+        },
     }
 </script>
diff --git a/stubs/inertia/resources/js/Pages/Welcome.vue b/stubs/inertia/resources/js/Pages/Welcome.vue
index a8c694bb8..844878c1c 100644
--- a/stubs/inertia/resources/js/Pages/Welcome.vue
+++ b/stubs/inertia/resources/js/Pages/Welcome.vue
@@ -177,8 +177,10 @@
 <script>
     export default {
         props: {
+            auth: Object,
             canLogin: Boolean,
             canRegister: Boolean,
+            errors: Object,
             laravelVersion: String,
             phpVersion: String,
         }