JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
<div id="app">
  <h1>Total: {{ sum }}</h1>
  
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-reset></button-reset>
</div>

SCSS

#app {
  display: block;
  padding: 1rem;
  padding-top: 2rem;
  font-size: 1rem;
}

button {
  display: block;
  margin: 1rem 0;
  font-size: 1rem;
}

JavaScript

const { ref, toRef, createApp } = Vue;

const common = () => {
	const sum = ref(0);
  const count = ref(0);
	const sumPlus = () => { sum.value++ };  
  const reset = () => { sum.value = 0 };
  
  return {
  	sum,
    count,
    sumPlus,
    reset
  }
};

const app = createApp({
	setup () {
		const { sum } = common();
    
    return {
			sum
    }
  }
});


app.component('button-counter', {
  template: `<button @click="plus">You clicked me {{ count }} times.</button>`,
  setup (props, { emit }) {
		const sumPlus = common().sumPlus;
    const count = ref(0);
    
    const plus = () => {
    	count.value++;
      sumPlus();
    };

    return {
	    count,
      plus,
    }
  }
});


app.component('button-reset', {
  template: `<button @click="reset">reset all</button>`,
  methods: {
    reset () {
			sum.value = 0;
    },
  },
});

app.mount('#app');