JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
   <p v-show="msg">{{ msg }}</p>
  
  <my-component :class="className" @click="greeting"></my-component>
</div>

SCSS

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

p {
  padding: 5px;
  background-color: yellow;
  margin-bottom: 1rem;
}

.block {
  display: block;
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}

JavaScript

const app = Vue.createApp({
  data() {
    return {
    	msg: '',
      className: 'block'
    }
  },
  methods: {
    greeting() {
      this.msg = 'Hello Vue!!!';

      window.setTimeout(() => {
        this.msg = '';
      }, 2000);
    }
  }
});

app.component('my-component', {
  template: `<div class="child-app"></div>`,
});

app.mount('#app');