Simple and Touch-ready Panes Splitter / Resizer Layout For Vue.js | Splitpanes

Split panels are a reliable, simple, touch-ready Vue.js device.

split screen layout examples, how to split screen in html, split screen layout css, how to divide html page into two parts vertically, css split screen vertically


  • Lightweight and no dependencies unlike Vue JS
  • Just worry about your parts, the partitions are automatic
  • Nesting support
  • Fully responsive
  • Support for touch devices
  • Push the other parts or not
  • Double click the separator to enlarge the pane
  • Programmatically set the width or height of the part
  • Programmatically add and remove parts
  • Supports Vue 2 and Vue 3

How to make use of it:

Install & Download:

npm i splitpanes # For Vue 2.x.
npm i [email protected] # For Vue 3.

Then import the component and CSS:

// In your Vue component.
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'

export default {
  components: { Splitpanes, Pane },

Include the Splitpanes script in your <head> document as follows:

  <script src=""></script>
  <script src=""></script>
  <link href="" rel="stylesheet">

Once you include it in your project, use the following.

<splitpanes class="default-theme">
  <pane v-for="i in 3" :key="i">
    <div>{{ i }}</div>


Here is the list of all the props.

  • horizontalDefault: false

    The orientation of the panes splitting.
    Vertical by default, meaning the splitters are vertical, but you can resize horizontally

  • push-other-panesDefault: true

    Whether it should push the next splitter when dragging a splitter until it reached another one.

  • dbl-click-splitterDefault: true

    Double click on splitter to maximize the next pane.

  • rtlDefault: false

    Supports Right to left direction.

  • first-splitterDefault: false

    Displays the first splitter when set to true. This allows maximizing the first pane on splitter double click.

touch-friendly split layout css, Splitpanes Plugin/Github

See Demo And Download

Official Website(antoniandre): Click Here

This superior jQuery/javascript plugin is developed by antoniandre. For extra Advanced Usages, please go to the official website.

Related Posts


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


Select Box Based Star Rating JavaScript Library | star-rating.js

star-rating.js is a small JavaScript library to create a customizable and gradually improved star rating control from a regular tick box with numeric values. The ES6 module…


Corner Fixed Notifications Alerts With Bootstrap | BS4 Show Notification

Bootstrap Notification is an easy-to-use jQuery plugin that uses the Bootstrap Alerts component to create static, rejectable, and stackable notification popups in the upper right corner of the…


Create Stackable Multi-level Sidebar Menu | HC Off-canvas Nav

Multi-Level Sidebar Slide Menu – HC MobileNav is a jQuery plugin for creating multi-level, mobile-first, totally accessible, off-canvas facet navigation that helps the infinite nesting of submenu…


Responsive Masonry Layout with SSR Support for Vue 3 | vue-masonry-wall

Vue masonry wall is a responsive masonry layout component for Vue 3 to deliver a Masonry-style responsive grid layout with SSR and RTL layout support. Features 📱…


A Bootstrap 5 Toast Notification Framework Library | bs-toaster

bs-toaster is simple to instantiate bs-toaster and create multiple toasts effortlessly using native Bootstrap 5! Feature Facts Small and clean Modern browser support. No IE sorry 💥…