Mokkapps Logo

Vue Tip: Reactive Values in CSS

11/11/2021

cover

Since Vue 3 it is possible to use reactive values in the <style>:

<template>
  <span class="label">Hello World!</span>
</template>

<script>
export default {
  props: {
    color: {
      type: String,
      default: 'blue',
    },
  }
};
</script>

<style>
  .label {
    color: v-bind(color);
  }
</style>

In this example we bind the color property of our Vue component to the CSS color property of our label.

Internally, Vue uses CSS variables that are scoped to each component.

More info can be found in the official documentation.



If you liked this tip, follow me on Twitter to get notified about new tips, blog posts and more content from me.

Alternatively (or additionally), you can also subscribe to my newsletter.

Du hast einen Fehler in diesem Artikel gefunden? Du möchtest gerne etwas klarstellen, aktualisieren oder hinzufügen?

Alle meine Artikel können auf Github editiert werden. Jeder Fix ist willkommen, egal wie klein er sein mag!

Ändern auf Github
Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)

Michael Hoffmann

Senior Frontend Developer (Freelancer) aus München mit Fokus auf Vue.js