Javascript is required
Mokkapps LogoMichael Hoffmann

Vue Tip: Reactive Values in CSS

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Michael Hoffmann
Nov 11, 2021
1 min read
Vue Tip: Reactive Values in CSS Image

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.

If you liked this Vue tip, follow me on Twitter to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter.