2 menu on the same page slideout js + vue js

ReadMe.md

Installation

Create a new vuejs project (or use the one you have).

# Create a new project:
$ vue init webpack

Go to project folder and install slideout:

npm install --save slideout

Fill the file App.vue with the contents I have provided with this gist.
You are good to go!

App.vue

<template>
  <div class="main">
    <div ref="left_menu">
      Left Menu
    </div>
    <div class="main" ref="panel">
      Main Page Is HERE
    </div>
    <div ref="right_menu">
      Right Menu
    </div>
  </div>
</template>

<script>
  import Slideout from 'slideout/dist/slideout.min.js'

  export default {
    data() {
      return {}
    },
    components: {
    },
    mounted() {
      enableSlideOuts.call(this)
    },
  }

  let enableSlideOuts = function () {
    let left_slideOut = new Slideout({
      'panel': this.$refs.panel,
      'menu': this.$refs.left_menu,
      'padding': 256,
      'tolerance': 70,
      'side': 'left'
    })
    let right_slideOut = new Slideout({
      'panel': this.$refs.panel,
      'menu': this.$refs.right_menu,
      'padding': 256,
      'tolerance': 70,
      'side': 'right'
    })

    let right_slideOut_makeSureClosed = function () {
      if (right_slideOut.isOpen()) {
        right_slideOut.close()
      }
    }
    let left_slideOut_makeSureClosed = function () {
      if (left_slideOut.isOpen()) {
        left_slideOut.close()
      }
    }

    left_slideOut.on('close', right_slideOut_makeSureClosed)
      .on('open', right_slideOut_makeSureClosed)
    right_slideOut.on('close', left_slideOut_makeSureClosed)
      .on('open', left_slideOut_makeSureClosed)

    left_slideOut.on('translatestart', function () {
      left_slideOut.menu.style.visibility = 'visible'
      right_slideOut.menu.style.visibility = 'hidden'
    })
    right_slideOut.on('translatestart', function () {
      left_slideOut.menu.style.visibility = 'hidden'
      right_slideOut.menu.style.visibility = 'visible'
    })
  }
</script>

<style>
  @import 'slideout/index.css';

  .slideout-menu-left {
    left: 0;
    right: unset;
  }

  .slideout-menu-right {
    right: 0;
    left: unset;
  }

  body, html, .main {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    user-select: none;
  }
</style>