JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://unpkg.com/vue@next"></script>
<div id="app">

  <h1>{{ message }}</h1>

  <custom-input v-model="message"></custom-input>
</div>

SCSS

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

h1 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

input {
  font-size: 1.25rem;
  padding: 5px;
}

JavaScript

const app = Vue.createApp({
  data() {
    return {
      message: "Hello Vue!"
    };
  }
});


app.component("custom-input", {
  props: ["modelValue"],
  template: `<input :value="modelValue"
		@input="$emit('update:modelValue', $event.target.value)"
	>`
});


app.mount("#app");