Description
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
- Check if you're on the latest VitePress version.
- Follow our Code of Conduct
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.