vue-splitjs

vue-splitjs

tiny unopinionated utility for resizeable split views, based on split.js

Compatibility

Compatible with Vue.js 2.x

Install

npm install vue-splitjs --save

Or if you want to use it directly in the browser add

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

to your scripts.

How to use

Import and register VueSplit component

// MyComponent.vue
import VueSplit from 'vue-splitjs'

export default {
  components: { VueSplit },
  // ...
}

You can use it in your vue app like this

<template>
  <vue-split
    :elements="[
      '#slotOne',
      '#slotTwo'
    ]"
    direction="vertical"
    :min-size="100"
    :gutter-size="10"
    :snap-offset="50"
  >
    <div id="slotOne">
      <h2>foo</h2>
    </div>
    <div id="slotTwo">
      <h2>bar</h2>
    </div>
  </vue-split>
</template>