Vue Reactive CSS Properties

#javascript #vue #showdev

Hey, so I just finished my first implementation, porting reactive-css-properties to a Vue plugin that I hope to release (I am trying to cover all the major players React, Vue, Angular).

Here is what the hello world starter with my stuff added in, my question is, is this idiomatic Vue? Would you be happy to use it, is there anything more ergonomic you would do as a Vue developer or anything that is unexpected?

<template>
  <div id="app">
    <p :style="{color: `${themeTextColor}`}">Inline test</p>
    <input type="color" @input="handleColorChange">
    <p @click="handleClick">click me</p>
    <img width="25%" src="./assets/logo.png">
    <HelloWorld :themeTextColor="themeTextColor" :msg="msg"/>
  </div>
</template>


<script>
import { CSSProp } from "./plugin/vue-reactive-css-properties";
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  props: {
    themeTextColor: {
      type: CSSProp,
      validator: CSSProp.validator,
      default: () => new CSSProp()
    }
  },
  data() {
    return {
      msg: "Hello code sandbox!"
    };
  },
  components: {
    HelloWorld
  },
  mounted() {},
  methods: {
    handleColorChange(e) {
      const value = e.target.value;
      this.themeTextColor(value);
    },
    handleClick() {
      this.themeTextColor("blue");
    }
  },
  watch: {
    themeTextColor(color, oldValue) {
      console.log("change", color, "was", oldValue);
      this.msg = `Hello Reactive CSS!, the color is now ${color}`;
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  margin-top: 60px;
}
</style>