splitpanes

Splitpanes is a Vue component that renders draggable, resizable split-pane layouts — the kind of horizontal or vertical panel dividers common in IDEs, dashboards, and admin panels. It supports both Vue 3 and Vue 2 (via a separate @legacy tag), works with touch input out of the box, and supports arbitrarily nested pane groups so complex multi-panel layouts can be composed from two simple components: <splitpanes> and <pane>.

Panes can be given min/max size constraints, fixed sizes, and can be resized or collapsed interactively by the end user, with the component emitting resize events so applications can persist layout state or react to size changes.

What You Get

• Two composable components: <splitpanes> (container) and <pane> (individual resizable panel)
• Horizontal and vertical split orientations, with nested splitpanes for complex grid-like layouts
• Touch-ready dragging for resizing panes on mobile and tablet devices
• Per-pane min/max size constraints and programmatic size control
• Resize/resized events for persisting or reacting to layout changes, plus CSS custom classes for styling

Common Use Cases

• Building IDE-style layouts with resizable sidebar, editor, and terminal panels
• Admin dashboards with adjustable panel widths for tables, filters, and detail views
• Split-screen comparison UIs (before/after, diff viewers) with draggable dividers
• Nested multi-pane layouts where users can resize both rows and columns independently

Under The Hood

Architecture The library centers on splitpanes.vue (~840 lines), which manages an internal array of pane state (size, min/max constraints) and computes flex-basis percentages for each <pane> slot child on drag events, propagating resize deltas across sibling panes so a single drag can adjust two adjacent panes’ sizes together; pane.vue is a thin wrapper that registers itself with its parent splitpanes instance via provide/inject. Tech Stack Built with Vue 3 SFCs (.vue files with <script>/<template>/<style lang="scss">), bundled with Vite into ESM and UMD builds (dist/splitpanes.esm.js, dist/splitpanes.umd.js), with a separate @legacy npm dist-tag maintaining a Vue 2-compatible build of the same API. Code Quality The component follows Vue’s official style guide conventions and ships hand-written .d.ts type definitions alongside the JS bundle; the project uses eslint with the standard style guide for linting, though the repository does not appear to include an automated unit test suite, relying instead on the demo site and manual/community testing. API Design The API is deliberately minimal — nest <pane> elements inside <splitpanes>, optionally passing size, min-size, and max-size props — so a working resizable layout requires almost no boilerplate, and orientation/nesting is expressed purely through component nesting rather than a separate configuration object.