codesandboxに書いてみたので、動きはこれを見ていただけると！（App.vue参照）
https://codesandbox.io/embed/objective-flower-kuov7?fontsize=14&hidenavigation=1&theme=dark
以下、ざっくり内容をざっくりメモ程度に。
template
<template><divid="app"><div><button@click="openDrawerMenu">ボタン</button></div><transitionname="right"><divv-if="drawerFlg"class="drawer-menu-wrapper"><divclass="drawer-menu"><!-- ここにメニューの内容を書いていく --></div></div></transition></div></template>script
<script>exportdefault{name:"App",data(){return{drawerFlg:false};},methods:{openDrawerMenu(){this.drawerFlg=true;}}};</script>style
<style>//右から出したい場合.right-enter-active,.right-leave-active{transform:translate(0px,0px);transition:transform225mscubic-bezier(0,0,0.2,1)0ms;}.right-enter,.right-leave-to{transform:translateX(100vw)translateX(0px);}//左から出したい場合.left-enter-active,.left-leave-active{transform:translate(0px,0px);transition:transform225mscubic-bezier(0,0,0.2,1)0ms;}.left-enter,.left-leave-to{transform:translateX(-100vw)translateX(0px);}//以下、メニューの形に合わせて良い具合に変更してください.drawer-menu-wrapper{position:absolute;z-index:10;top:0;right:0;//右に出す場合left:0//左に出す場合width:50%;height:100%;background-color:white;}.drawer-menu{padding:24px;}</style>