Cómo usar estilos CSS reactivos con Vue 3

Si utilizas Single File Components para trabajar con Vue 3, puedes usar propiedades y datos reactivos como variables CSS 🔥.

Supongamos que tienes una referencia reactiva llamada color, donde quieres guardar un color. Para ello, usas la directiva v-model y asocias la referencia y un input de tipo color (un colorpicker de toda la vida, vaya). Algo así.

<script setup>
import { ref } from 'vue';
const color = ref('#000000'); // Color default value
</script>

<template>
	<div class="wrapper">
		<input type="color" v-model="color" />
	</div>
</template>

La pregunta, es ¿cómo asociamos ese color a un elemento HTML?.

v-bind CSS con Vue 3

Aunque hay muchas formas de conseguir nuestro objetivo, con esta nueva sintaxis de v-bind y CSS en Vue 3 puedes convertir tu referencia/valor reactivo en una variable CSS. Solo tienes que usar v-bind como valor en tus selectores CSS. Vue se encarga del resto. En nuestro caso sería algo así.

<script setup>
	...
</script>

<template>
	...
</template>

<style scoped>
.wrapper {
  background-color: v-bind(color); /* Link color reference to the background-color CSS property reactively */
}
</style>

De esta forma, cada vez que cambies el color a través del colorpicker, estarás cambiando el valor de la referencia color y, como la utilizas para calcular el color de fondo, se actualizará instantáneamente.

Estilos CSS reactivos con Vue

Podemos ir más allá: imagina que tienes un objeto reactivo (reactive) con estilos CSS y quieres aplicar alguno de ellos. Esta nueva sintaxis v-bind con CSS te permite evaluar expresiones (como la referencia a un objeto) si las envuelves en comillas. Por ejemplo:

<script setup>
import { ref, reactive } from 'vue';
const color = ref('#000000');

const styleObject = reactive({
  styles: {
    border: '.3rem solid goldenrod',
  },
});
</script>

<template>
	...
</template>

<style scoped>
.wrapper {
  background-color: v-bind(color);
  border: v-bind('styleObject.styles.border'); /* Evaluate a JS expression if you wrap it in quotes */ 
}
</style>

Como ves, nos referimos a una propiedad del objeto reactivo styleObject y capturamos el valor de una de sus propiedades.

Sencillo, ¿verdad?. Tienes todo el código y una demo aquí. 👈