getSSRProps return value does not pass down innerHTML as dom props
Vue version
3.2.47
Link to minimal reproduction
https://stackblitz.com/edit/github-c1z4a8-we3axz?file=src/main.ts
Steps to reproduce
return { innerHTML: 'some value' } from a Vue directive via getSSRProps. innerHTML is then not propagated. (see also stackblitz example)
What is expected?
I expect innerHTML to be defined serverside so that my component is prefilled with content before rendering.
What is actually happening?
The innerHTML is not filled, which means the content stays blank (see stackblitz example)
System Info
System:
OS: macOS 12.6
CPU: (10) arm64 Apple M1 Pro
Memory: 96.88 MB / 32.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.14.2/bin/yarn
npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
Browsers:
Chrome: 112.0.5615.121
Firefox: 112.0.1
Safari: 16.0
Any additional comments?
I'm currently working rewriting some parts of our codebase from Nuxt 2 to Nuxt 3. I initially thought this was related to Nuxt but the same issue is happening in Vue 3 with SSR rendering too. I try to modify the innerHTML serverside but it seems that innerHTML is not propagated. I tried in the stackblitz example to write some content to innerHTML via getSSRProps. I'm not sure if this is a bug or intended behaviour, or perhaps there is a different way to modify innerHTML in getSSRProps?
getSSRProps does not support rendering of these properties. But I use v-html in ssr server is normal
I think it needs to be fixed, and this only happens in optimized compilation. For client-compiled render functions it works.