Cómo usar estilos CSS reactivos con Vue 3

Inicial Vue Curso Vue en Escuela Vue

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í. 👈

Código asociado
Curso Vue en Escuela Vue

¿Tienes alguna pregunta sobre Cómo usar estilos CSS reactivos con Vue 3?

Resuelve todas tus dudas sobre Vue en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.

Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬