[FIXED] Vue is missing server side rendered DOM, doubling it and throwing hydration node mismatch

Issue

browser build and python (flask) backend. As far as I understand everything should work, the DOM is identical in both and doesn't change after that, but vue ignores the server-side rendered DOM and generates it from scratch. What surprises me even more is the fact that it does not delete the server's initial rendered DOM, but doubles it in exactly the same way. How to make vue work with prerendered dom?

console message:

vue.esm-browser.js:1617 
[Vue warn]: Hydration node mismatch:
- Client vnode: Symbol(Comment) 
- Server rendered DOM: " " (text) 
  at <RouterView> 
  at <App>

Hydration complete but contains mismatches.

Minimal, Reproducible example: on code pen. My code is quite complex and messy so I isolated the bug to html and js only.

Solution

It turned out that the issue for me was formating...

It was working:

<div id="app">{{ server rendered html }}</div>

It was not:

<div id="app">
    {{ server rendered html}}
</div>

Answered By - Marcel