How to Create Dynamic CSS Using Vue Reactive Variables

If you use Vue, you might be used to having to apply different classes to tags based on the logic in your code. That's because we might want to reactively update an element’s class based on when certain conditions. For example, suppose a variable check is set to true, we want a div to show as red, but otherwise, it should be blue. For such use cases, it's common to see the following code:

<div :class="check === true ? 'red' : 'blue'">
    Hello World
</div>

Did you know, however, that you can actually put Vue reactive variables straight in your CSS with Vue 3? We have to use the composition API but once we do, we can avoid the code above and put our variable straight in our CSS.

Let's look at a simple example. Suppose we have the following script in our Vue template:

<script setup>
import { ref } from 'vue'

const check = true;
let color = ref('#ff0000');

if(check == true) {
  color.value = '#0000ff';
}
</script>

<template>
        <input value="Hello World" />
</template>

Simple, right? If check is true, the color variable is '#0000ff'. Otherwise, it's '#ff0000'. In our CSS, with Vue 3, we can now directly reference color by using v-bind:

<style>
  input {
    color: v-bind(color)
  }
</style>

Now if color updates reactively, the color of input will change to whatever the color variable is set to. That means you can avoid some awkward logic in your HTML tags, and start using Javascript variables straight in your CSS - and I think that's pretty cool.