·
0 min read
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:
Vue Tip: Prefer Slots Over Props
Prefer slots over props as they give the parent the freedom to customize components.
Vue Tip: Detailed Prop Definitions
Define your Vue prop definitions as detailed as possible.