Javascript is required
Mokkapps Logo

Vue Tip: Reactive Values in CSS

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Nov 11, 2021
1 min read
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 content from me. Alternatively (or additionally), you can also subscribe to my newsletter.