Vue Tip: Reactive Values in CSS

Since Vue 3 it is possible to use reactive values in the <style>:

<template>
  <span class="label">Hello World!</span>
</template>

<script>
export default {
  props: {
    color: {
      type: String,
      default: 'blue',
    },
  },
}
</script>

<style>
.label {
  color: v-bind(color);
}
</style>

In this example, we bind the color property of our Vue component to the CSS color property of our label.

Internally, Vue uses CSS variables that are scoped to each component.

More details are available in the official documentation.