Vue Tips: Dynamic CSS with Vue Reactive Variables
📣 Sponsor
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 elements class based on when certain conditions. For example, suppose if 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 (read more: difference between composition and options API), but once we do, we can avoid the code below 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>
<input value="Hello World" />
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.
More Tips and Tricks for Vue
- Navigation between views in Vue with Vue Router
- How to give Props Default Values in Vue
- Using .env Environment Variables in Vue
- Vue Tips: Dynamic CSS with Vue Reactive Variables
- v-show vs v-if: Conditional Rendering in Vue
- How Vue Components Work
- How to use Props in Vue
- How to use Teleport in Vue to Move Parts of Templates
- Creating your first Vue App
- Making a Vue To-do List App