vitepress

vitepress copied to clipboard

Describe the bug

When using a computed value as a prop, that value is only applied once at build, it's not changed during pageload if it differs.

For example, when using a computed value to determine the current theme, this will be lightmode on the server, but the user may have dark mode set in their preferences.

The isDark composable then returns dark on the user's machine, but the static HTML has light bound to it, and that doesn't change until the isDark composable changes state again.

Reproduction

Website: https://lenni009.github.io/vitepress-computed-bug/

Minimal repo with component: https://github.com/Lenni009/vitepress-computed-bug/blob/main/index.md?plain=1

Expected behavior

The application state should be applied to the HTML at pageload, so there are no mismatches.

In this case, the text background should be black if the user prefers dark.

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 5.45 GB / 15.96 GB
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.3.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 123.0.6312.59
    Edge: Chromium (123.0.2420.53)
    Internet Explorer: 11.0.19041.3636
  npmPackages:
    vitepress: ^1.0.1 => 1.0.1

Additional context

No response

Validations

• [X] Check if you're on the latest VitePress version.
• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

It's vue behavior I guess. It doesn't hydrate that stuff. You'll need to use ref + onMounted + watchPostEffect instead.

Simpler alternative might be to use a third value in SSR - it might cause flash though:

const theme = computed(() => (inBrowser ? isDark.value ? 'dark' : 'light' : undefined))