Vue Reactive CSS Properties

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>

Live preview

I really am looking for comments in feedback, tell me if Im way off. Thanks!

Blog

Vue Reactive CSS Properties

Adam Crockett 🌀

Join Our Newsletter. No Spam, Only the good stuff.

Related