JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app"></div>

JavaScript

const { createApp, ref } = Vue

const Overlay = {
  template: `
    <button @click="hide">Hide</button>
  `,
	props: {
    isVisible: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["update:isVisible"],
  setup(props, context) {
    function hide() {
      context.emit("update:isVisible", false);
    }
    
    return {
      hide
    }
	}
}

const ParentComponent = {
  template: `
    <div>
      <button @click="overShow = true">Show</button>
      <Overlay v-if="overShow" v-model:isVisible="overShow" />
    </div>
  `,
  components: {
    Overlay
  },
  setup() {
    const overShow = ref(false)
    
    return {
      overShow
    }
  }
}

createApp(ParentComponent).mount('#app')