Reactive CSS Variable Injection with v-bind

Snippet

Reactive CSS Variable Injection with v-bind

Vue allows direct binding of JavaScript state to CSS via v-bind() inside <style> blocks. Under the hood, Vue generates unique CSS variables on the component's root element and updates them whenever the reactive state changes. This provides a bridge between logic and presentation while maintaining high performance, as style recalculations are handled efficiently by the browser's CSS engine.

snippet.js
javascript
<script setup>
import { ref } from 'vue';
const themeColor = ref('#3498db');
const spacing = ref('20px');
</script>
 
<template>
  <div class="dynamic-container">Content</div>
</template>
 
<style scoped>
.dynamic-container {
  /* Vue compiles this into a CSS variable linked to the JS ref */
  background-color: v-bind(themeColor);
  padding: v-bind('spacing');
  transition: background-color 0.3s ease;
}
</style>

vue

Breakdown

v-bind(themeColor)

Binds the reactive 'themeColor' ref to a dynamically generated CSS custom property.

v-bind('spacing')

String literals can also be used, allowing for more complex expressions if needed.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Reactive CSS Variable Injection with v-bind

Related