Highly Customizable Split View Component – vue-splitter

vue-splitter is a Vue 3 component that allows the creation of split views in Vue 3 applications. You can set up side-by-side or stacked panels that you can adjust to your liking.

Ideal for developers who need to compare two sets of data, view multiple files, or show different perspectives in their Vue projects.

How to use it:

1. Install and import the VueSplitter component.

# NPM
$ npm i @rmp135/vue-splitter
import VueSplitter from '@rmp135/vue-splitter'

2. Create a basic side-by-side split view.

<vue-splitter>
  <template #left-pane>
    <div>Left Content</div>
  </template>
  <template #right-pane>
    <div>Right Content</div>
  </template>
</vue-splitter>

3. Nesting split views are supported as well.

<template>
  <vue-splitter>
    <template #left-pane>
      Left Content
    </template>
    <template #right-pane>
      <vue-splitter is-horizontal>
        <template #top-pane>
          Top Content
        </template>
        <template #bottom-pane>
          Bottom Content
        </template>
      </vue-splitter>
    </template>
  </vue-splitter>
</template>

4. Available props to customize the split view:

isHorizontal: boolean,
percent?: number,
initialPercent?: number | string,

5. Events.

<vue-splitter @update:percent="onUpdatePercent">
  ...
</vue-splitter>
<vue-splitter @splitter-click="onSplitterClick">
  ...
</vue-splitter>

Preview:

highly-customizable-split-view

Download Details:

Author: rmp135

Live Demo: https://rmp135.github.io/vue-splitter/

Download Link: https://github.com/rmp135/vue-splitter/archive/refs/heads/master.zip

Official Website: https://github.com/rmp135/vue-splitter

Install & Download:

# NPM 
$ npm i @rmp135/vue-splitter

Add Comment