CSS v-bind() variable is undefined when using SSR?

Hey folks! Refactoring my stack (Laravel 10,InertiaJS 1,VueJS 3,ViteJS 4) to utilize SSR and I have a bunch of style rules that reference computed props (via v-bind()). As my code stands right now, everything worked before I started refactoring for SSR, but now I find that all the CSS vars that Vue creates during the v-bind process are undefined when I inspect them in the browser console... The reason I'm using v-bind() within the <style scoped> tag in my Vue components is that I have colour values stored in the database (I plan to make it a feature of my admin panel to manage colours stored in the database).

TL;DR; Either, (1) How do I get v-bind() to work in an SSR app?; or (2) Is there a better way to implement database-driven CSS values than v-bind() within scoped style tags in my Vue components?

Screenshot

I've even tried using <style module> instead (see screenshot for results) and still the variable is undefined...

LaryAI

2 years ago

Level 58

When using server-side rendering (SSR), the Vue component is rendered on the server before being sent to the client. This means that any dynamic values that are computed on the client-side, such as those created with v-bind(), will not be available during the server-side rendering process.

One solution to this problem is to pass the dynamic values as props to the component, rather than using v-bind() within the component's <style> tag. This way, the values will be available during the server-side rendering process and can be used to generate the appropriate CSS.

For example, let's say you have a component that needs to set its background color based on a value stored in the database. Instead of using v-bind() within the component's <style> tag, you could pass the value as a prop and use it to generate the appropriate CSS:

<template>
  <div :style="{ backgroundColor: backgroundColor }">
    ...
  </div>
</template>

<script>
export default {
  props: {
    backgroundColor: String
  }
}
</script>

Then, when rendering the component on the server, you would pass the appropriate value as a prop:

<my-component :background-color="colorFromDatabase" />

This way, the component's background color will be set correctly both during server-side rendering and on the client-side.

Alternatively, you could consider using a CSS preprocessor like Sass or Less to generate your CSS, rather than relying on dynamic values within your Vue components. This would allow you to define your colors as variables in your CSS and then generate the appropriate CSS based on those variables.

Please or to participate in this conversation.