A simple offcanvas sidebar for Vue.js (compatible with Vue 2.x)

• Demo

It's built as UMD module, so you can use it in any way you want.

Directly in an HTML page (it will be available as global variables VueOffcanvas):

<script type="text/javascript" src="http://cdn.rawgit.com/sunabozu/vue-offcanvas/master/index.js"></script>

Or by installing...

npm i vue-offcanvas --save

...and then importing it:

import VueOffcanvas from 'vue-offcanvas'

// or

const VueOffcanvas = require('vue-offcanvas')

In your component:

export default {
  data() {
    return {
      show: false
    }
  },

  components: {
    VueOffcanvas,
  },

  ...
}

In your template:

<button @click="show = true">Toggle</button>

<vue-offcanvas v-model="show" :width="300" :duration=".3" effect="ease-in-out">
  the content of your sidebar goes here
</vue-offcanvas>

WARNING: do not use the style attribute on the root element (vue-offcanvas in this case). Use css classes instead.