Undesired side effects introduced in v0.9 and v0.4 (Vue 3)

[jonagoldman]

The easiest way to see the issues is installing a fresh Laravel Breeze application and upgrading the JavaScript packages to the latest Inertia JS versions.

I tried refactoring the Vue components to use single root elements, setting the inheritAttrs to true/false, setting persistent layouts in app.js or inside the page component, using the old client setup and the new createInertiaApp way.... I just can't find a way to make it behave like in previous versions.

This is very evident when using the Vue Devtools extension and comparing with an old Breeze installation.
The Vue component properties and the rendered Dom elements are different, in a bad way I think.

I can't find a combination of changes that don't produce some side effects or force me to use some kind of workaround.

Maybe I'm missing something but will be really helpful to see a Breeze application using the latest versions as an example.

Maybe someone found the solution?
Thanks.

[reinink]

The Vue component properties and the rendered Dom elements are different, in a bad way I think.

Different how? Bad how?

[jonagoldman]

I can make a list with specific issues I had and provide a more detailed response once I have it.

A simple example for now: Properties from a Page are passed to the Layout:

Before:

After:

(in both cases components are wrapped in a root div)

And naturally this also gets reflected in the Dom, and it gets huge and messy,

I understand changes were made to fix this kind of issues, inheritAttrs, persisting layouts and so on, but they introduces new ones.

I will provide more details in a following response.

(btw is not my intention to be negative, maybe something is missing in the docs or I'm not getting something, just pointing out there is a big change between versions and I can't fix the differences)

[reinink]

Ahh yes, you're right, as of this change (#602), page props are automatically made available to layouts. However, in Vue 3, it's going to try and actually render them as attributes.

One way to prevent this is to set inheritAttrs: false in your page layout component:

export default {
  inheritAttrs: false,
}

However, I wonder if we can do this automatically, like we did here: #681

I'll have to play with it.

[reinink]

Okay, got it fixed: #740

Note, while this will prevent the page props from rendering as attributes in your layout, it will not hide remove them from being listed as attrs in the Vue devtools, as they are definitely available as props to the layouts (which is desirable as per #602).

[reinink]

This fix has been released: https://inertiajs.com/releases/inertia-vue3-0.4.6-2021-06-10