JSFiddle - React, Tailwind, and code Playground

by Hans Fel

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
    <div @click="drawer = true" class="hamburger">
       H
       <span></span>
       <span></span>
       <span></span>
    </div>

   <mobile-drawer-menu :drawer.sync="drawer"/>
</div>

Babel + JSX

Vue.component('mobile-drawer-menu', {
	template: `<div v-if="drawer" class="fixed top-0 left-0 z-200">
        <div @click="$emit('update:drawer', false)" class="overlay"></div>
        <div class="drawer-wrapper">
            <div class="drawer-close">
               <div class="flex items-center justify-end">
                 
                  <span @click="$emit('update:drawer', false)"> X</span>
               </div>
            </div>
        </div>
    </div>`,
  name: "MobileDrawerMenu",
  props : {
        drawer : {
            type : Boolean,
            required : true
        }
  },
})

const app = new Vue({
  data() {
        return {
            drawer : false,
        }
  },
}).$mount('#app')