Skip to content

Commit

Permalink
Fix Vue warning (#62)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
ahmedkandel authored Apr 22, 2021
1 parent 7635274 commit fab1ce2
Show file tree
Hide file tree
Showing 7 changed files with 25 additions and 2 deletions.
5 changes: 5 additions & 0 deletions stubs/inertia/resources/js/Pages/Auth/ConfirmPassword.vue
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,11 @@
BreezeValidationErrors,
},
props: {
auth: Object,
errors: Object,
},
data() {
return {
form: this.$inertia.form({
Expand Down
4 changes: 3 additions & 1 deletion stubs/inertia/resources/js/Pages/Auth/ForgotPassword.vue
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,9 @@
},
props: {
status: String
auth: Object,
errors: Object,
status: String,
},
data() {
Expand Down
5 changes: 5 additions & 0 deletions stubs/inertia/resources/js/Pages/Auth/Register.vue
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,11 @@
BreezeValidationErrors,
},
props: {
auth: Object,
errors: Object,
},
data() {
return {
form: this.$inertia.form({
Expand Down
2 changes: 2 additions & 0 deletions stubs/inertia/resources/js/Pages/Auth/ResetPassword.vue
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,9 @@
},
props: {
auth: Object,
email: String,
errors: Object,
token: String,
},
Expand Down
4 changes: 3 additions & 1 deletion stubs/inertia/resources/js/Pages/Auth/VerifyEmail.vue
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,9 @@
},
props: {
status: String
auth: Object,
errors: Object,
status: String,
},
data() {
Expand Down
5 changes: 5 additions & 0 deletions stubs/inertia/resources/js/Pages/Dashboard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,10 @@
components: {
BreezeAuthenticatedLayout,
},
props: {
auth: Object,
errors: Object,
},
}
</script>
2 changes: 2 additions & 0 deletions stubs/inertia/resources/js/Pages/Welcome.vue
Original file line number Diff line number Diff line change
Expand Up @@ -177,8 +177,10 @@
<script>
export default {
props: {
auth: Object,
canLogin: Boolean,
canRegister: Boolean,
errors: Object,
laravelVersion: String,
phpVersion: String,
}
Expand Down

0 comments on commit fab1ce2

Please sign in to comment.