How to Prevent Flash of Incorrect Theme (FOUC) in SSR with Vike?

[abdrahmanrizk]

I'm using Vike with SSR and experiencing a flash of the wrong theme before the correct one is applied. How can I ensure the theme is applied correctly on the first render to avoid this flash?

Thanks!

[brillout]

Seems to be more of a user-land question than a Vike related one?

[abdrahmanrizk]

One of the approaches I tried was using:

config({
  Head: h('script', {
    innerHTML: `console.log('Hello world!')`
  })
})

It resulted in the following error:

Following error was thrown by the onRenderHtml() hook defined at vike-vue/__internal/integration/onRenderHtml
Error: Using useConfig() with HTML streaming isn't supported yet
    at file:///.../vike-vue/src/hooks/useConfig/useConfig-server.ts:28:13
    at setup (/.../src/pages/+Head.vue:11:1)
    at _sfc_main.setup (/.../src/pages/+Head.vue:35:23)
    at callWithErrorHandling (/.../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:200:19)

[brillout]

If you'd use React you would simply use +Head.jsx, right? Is there a way to tell Vue to render a <script> tag defined inside a .vue file? Does Vue even allow this? Is there a workaround? It seems Vue does some escaping for security reasons I presume?

If there isn't a way to do it with Vue, then Vike should definitely be implementing a new feature. FYI, regardless of your use case, I was already thinking of a new setting +scripts.

[abdrahmanrizk]

If you'd use React you would simply use +Head.jsx, right?

Yes

Is there a way to tell Vue to render a <script> tag defined inside a .vue file?

I’ve raised this issue with Vue in their RFC discussion: Vue RFC Discussion #757.

[brillout]

Here is an example of defining a <script> tag inside .vue files: https://github.com/vikejs/vike-vue/blob/fed2f473e2eb1c33ea1943908737dd8bb1047359/examples/full/pages/images/Image.vue

Is that the only workaround?

I'm more than open to implement +script but let's first do a thorough research on what workarounds there is around defining <script> tags inside .vue files. Up for the task?

Following error was thrown by the onRenderHtml() hook defined at vike-vue/__internal/integration/onRenderHtml
Error: Using useConfig() with HTML streaming isn't supported yet

Can you publish a minimal reproduction? In the example above, using useConfig() works just fine.

[abdrahmanrizk]

Ah, my bad — it was actually my mistake!

I was trying to inject the script inside +Head.veu and +config.ts all the time and didn’t think to try it directly in a page. Just tested it, and it works perfectly.

This work only on pages and layouts

config({
  Head: h('script', {
    innerHTML: `console.log('Hello world!')`
  })
})

Thanks again 🙌, and sorry for the confusion!

[brillout]

It's now documented: 1a28f67.