·
0 min read

Vue Tip: Reactive Values in CSS

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 X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

I will never share any of your personal data. You can unsubscribe at any time.