How to Use Vue 3 CSS Variables With v-bind: Reactive Styles

You can use Vue 3 reactive values as CSS variables with the v-bind() function. It is one of the ways to apply dynamic CSS styles to Vue single-file components.

In order to utilize Vue 3 variables such as ref or reactive within the CSS style section, use the Vue.js v-bind() function with the reactive variable as its argument to a specific CSS property.

In this article, we will go through the process of using reactive data for CSS property values in Vue 3 single file components.

Using Vue 3 Reactive Variables With CSS v-bind()

There are 2 simple steps to apply reactive variables in the component's style section:

• Create reactive data using ref() or reactive() in Vue 3.
• Access that reactive data inside the <style> section with v-bind() CSS function.

Step 1: Creating reactive data variables

Vue 3 has different reactivity APIs such as ref() or reactive() to create reactive data. You can use this data as an argument of the v-bind() function.

          <template>
    <main>
        <div class="section">Web Mound</div>
    </main>
</template>

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

const color = ref('#292D3E')
</script>

<style scoped>
.section {
    width: 250px;
    height: 250px;
    color: #fff;
    background-color: v-bind(color);
}
</style>
        

In this example, I am creating the color variable using ref() with a default color code. We can use this variable's value in our CSS.

Also Read: How to Pass Data From Child to Parent in Vue 3 (Composition API)

Step 2: Access the reactive variable using v-bind() function

I am setting the background-color CSS property value using the v-bind() function and passing the color variable to the function. It will define a CSS variable with the value of the color variable and use it for the background-color property.

The v-bind() CSS function also supports complex data types like objects. Instead of passing a reactive variable, you can pass an object property to this function.

          <template>
    <main>
        <div class="section">{{ details.text }}</div>
    </main>
</template>

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

const details = reactive({
    bg: '#292D3E',
    text: 'Web Mound',
})
</script>

<style scoped>
.section {
    width: 250px;
    height: 250px;
    color: #fff;
    background-color: v-bind('details.bg');
}
</style>
        

In this example, I have defined an object using the reactive() function. This object has 2 properties. Let's see how can we use an object property inside the <style> section.

Here I am not directly passing a variable to the v-bind() function. Instead, I am accessing the bg property from the details object. You have to wrap this JavaScript expression in quotes.

Your HTML element will get the color code value as its background color. You can spin up your Vue application and check it in the browser.

Also Read: Composition API VS Options API in Vue 3 For Beginners

Reactive Styles in Vue 3 SFC

There is an advantage of using a reactive variable inside the <style> section. The CSS property value will update on runtime whenever the value of that variable changes. It becomes very easy to add or modify styles dynamically.

In the previous example, we added a background color using reactive data. Now you can easily modify that background color value in JavaScript. Change the value of that reactive data, that's all you have to do.

It doesn't matter if you are using a variable or an object property in the v-bind() function. The process is the same.

          <template>
    <main>
        <div class="section">Web Mound</div>

        <button @click="changeColor">Change</button>
    </main>
</template>

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

const color = ref('#292D3E')

const changeColor = () => {
    color.value = '#125E96'
}
</script>

<style scoped>
.section {
    width: 250px;
    height: 250px;
    color: #fff;
    background-color: v-bind(color);
}
</style>
        

I have a button element in this component. Whenever I click the button, it will set a new color code to the color variable.

Since I am using this variable for the background-color property, it will also change the background color of the <div> element at runtime.

Also Read: Improve Performance in Vue 3 Using Lazy Loading and Dynamic Import

Conclusion

Vue has amazing features to add CSS styles. But this feature allows us to add and modify CSS values programmatically. Now we have direct control over our CSS property values from our code.

You can use any reactive variable or object property inside the component's style section with the v-bind() function. Change the value of the reactive data in your JavaScript code, it will automatically change the CSS style.