vue-offcanvas

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

Links

• 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')

Usage

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.

Properties

Property | Default | Description -------- | ------ | ----------- align | left | Position of the sidebar (left or right) width | 270 | Width of the sidebar duration | 0.2 | Duration of the slide-in/slide-out animation effect | linear| A timing function for the transition-timing-function css property; you can also use the custom bounce value close-on-external-click | true | Should the sidebar be closed on a click outside it? close-on-esc | true | Should the sidebar be closed on an Esc key?