-
-
Notifications
You must be signed in to change notification settings - Fork 8.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
v-bind css variable crashes during ssr dev #6926
Comments
We do not inject core/packages/compiler-sfc/src/compileScript.ts Lines 1381 to 1393 in 830454a
|
@edison1105 There are some use cases where it would actually be nice to have css vars work with SSR. For instance, if I am prerendering and then want to lazily hydrate some components but still have the css vars initially bound so styles show up. Not sure how Astro is doing this but my guess is you can't use css vars unless you are eventually CSR which is limiting. Now Vue is often being used as an SSR templating language where people may want to use props to set css dynamically during the build but may never hydrate that component. I didn't see much other related discussion so thought I would chime in here. Happy to make a separate issue. |
Lazily hydrate is not supported by vue-core, Maybe you have to wait until Q2. The final implementation is uncertain and may not be the same as Astro. Now, CSS vars in SSR do not need hydrate because the initial value of CSS var is calculated in the SSR render phase.
It will have to wait until vue implements lazily hydrate to see if there is a similar problem. If you already have this problem now, please open issues if you encounter them and talk about them more. |
FYI this bug is currently happening in vue 3.2.47. I am simply running the Given the shortened following component: <template>
<Icon :icon="icon" />
</template>
<script setup lang="ts">
import { computed, toRefs } from 'vue'
const props = defineProps<{
state: 'pending' | 'running' | 'completed' | 'failed'
}>()
const { bgColor, color, icon } = toRefs(useStatusDisplay(state))
</script>
<style scoped lang="scss">
.run-status :deep(i) {
color: v-bind(color);
}
</style> it outputs setup(__props, { expose }) {
expose();
const props = __props;
_useCssVars((_ctx) => ({
"1c89043a-color": _unref(color)
}));
const { bgColor, color, icon } = toRefs(useStatusDisplay(state));
} with the error: |
Vue version
3.2.41
Link to minimal reproduction
https://github.com/Trinovantes/vue-ssr-css-bind
Steps to reproduce
Visit
localhost:8080
and server crashes withWhat is expected?
No crash
What is actually happening?
The generated setup function seems to be referencing
paddingTop
variable before it is declaredSystem Info
Any additional comments?
Works fine without SSR
Workaround:
<h1 :style="{paddingTop}">
in the<template>
instead but this is pretty cumbersomeThe text was updated successfully, but these errors were encountered: