Vue 2 のインスタンスのデータを css で利用する方法

style オブジェクトで、変数定義を行い、それを css 側から利用すれば良い。

例:

<template>
  <div :style="styleObject"></div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  props: { color: String },
  computed: {
    styleObject() {
      return {
        '--some-color': this.color
      }
    }
  }
})
</script>

<style scoped>
div {
  background: var(--some-color);
}
</style>

---2022/06/19