Vue and SSR cause hydration mismatches.

[gribbl]

Package version

1.2.4

Describe the bug

Hello.

Recently, I wanted to try Inertia with Vue and SSR. Everything was fine until I created a layout. As shown in the attached images, I encountered few hydration issues. I've also attached a repro, which is simply a new Adonis project using the Inertia starter kit. Then, I added a layout, located at inertia/layouts/MainLayout.vue, and defined it in app.ts and ssr.ts as described in the Inertia documentation for setting a default layout. I also updated the @adonisjs/inertia package to version 1.2.4

Basically, it seems that whenever I update the content of a page, HMR crashes. This forces me to manually reload the browser after every change. With the repro, if I update the ref in home.vue located at inertia/pages, for example, it doesn’t work. Additionally, even if no warning message appears in the console, the content of the home page still disappears.

I’m on Windows 11 and I use Node 22.11.0, Chrome 131.0.6778.109 and Firefox 133.0.

Reproduction repo

https://github.com/gribbl/adonis-inertia-vue-ssr

[Julien-R44]

It seems that the error only occurs when we have a layout and also only when upading a ref. If I update the layout itself or the HTML, no error occurs. Not sure to understand why now but I can confirm this looks like a bug