Registry / web-framework / vue-splitpane

vue-splitpane

library1.0.6jsnpmunverified

Vue Split Pane is a component designed for Vue 2 applications, enabling the creation of resizable split panels either vertically or horizontally. It provides a straightforward way to divide layout space into two adjustable panes, which can also be nested for more complex layouts. The package is currently at version 1.0.6, with the last notable activity (according to provided snippets) in 2022, primarily focused on minor bug fixes and feature enhancements like emitting current percent values. Given its exclusive support for the End-of-Life (EOL) Vue 2 framework, its release cadence is effectively ceased, and it should be considered in a maintenance or abandoned state. Its key differentiator is its simplicity and direct compatibility with legacy Vue 2 projects requiring basic split-pane functionality without migrating to newer frameworks or complex libraries.

web-framework

npm install vue-splitpane

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-SPLITPANE

vue-splitpane

web-frameworkjavascriptv1.0.6

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

splitPane

✓ import splitPane from 'vue-splitpane';

✗ import { splitPane } from 'vue-splitpane';

The component is exported as a default export. Named imports will fail.

This example demonstrates global registration of `split-pane`, its basic usage with vertical splitting, and a nested horizontal split pane. It includes a `resize` event handler and dynamic percentage display.

import Vue from 'vue'; import splitPane from 'vue-splitpane'; // Register as a global component Vue.component('split-pane', splitPane); new Vue({ el: '#app', data: { percentL: 30, percentR: 70 }, methods: { resize(newPercent) { console.log('Pane resized to:', newPercent); this.percentL = newPercent; this.percentR = 100 - newPercent; } }, template: ` <div style="height: 500px; width: 100%; border: 1px solid #eee;"> <split-pane @resize="resize" :min-percent="20" :default-percent="percentL" split="vertical"> <template slot="paneL"> <div style="padding: 20px; text-align: center; background: #f0f2f5;"> Left Pane ({{ percentL.toFixed(1) }}%) <p>This pane resizes horizontally.</p> </div> </template> <template slot="paneR"> <split-pane split="horizontal"> <template slot="paneL"> <div style="padding: 20px; text-align: center; background: #e6f7ff;"> Right Top Pane <p>This nested pane resizes vertically.</p> </div> </template> <template slot="paneR"> <div style="padding: 20px; text-align: center; background: #fffbe6;"> Right Bottom Pane </div> </template> </split-pane> </template> </split-pane> </div> ` });

Debug

Known issues

breakingThis component is built exclusively for Vue 2.x and is not compatible with Vue 3. Using it in a Vue 3 project will result in runtime errors related to component registration and lifecycle hooks.

fix

For Vue 3 projects, seek a dedicated split-pane component compatible with Vue 3, or rewrite the functionality using Vue 3's composition API and reactive primitives.

affects: >=1.0.0

gotchaThe `split` prop is mandatory and must be explicitly set to either 'vertical' or 'horizontal'. Omitting this prop will prevent the component from rendering correctly or cause unexpected behavior.

fix

Always include `:split="'vertical'"` or `:split="'horizontal'"` when using the component. Example: `<split-pane split="vertical">`.

affects: >=1.0.0

gotchaThe `min-percent` and `max-percent` props define the minimum and maximum size for the *first* pane (paneL / top pane). These percentages are relative to the total container size.

fix

Understand that `min-percent='20'` means the left/top pane cannot be smaller than 20% of the total width/height. Adjust these values based on the desired bounds for `paneL`.

affects: >=1.0.0

Errors

Common errors & fixes

[Vue warn]: Unknown custom element: <split-pane> - did you register the component correctly? For recursive components, make sure to provide the 'name' option.

The `split-pane` component was used in a template but not registered globally (via `Vue.component`) or locally (via the `components` option in a Vue instance/component).

fix

Register the component: `import splitPane from 'vue-splitpane'; Vue.component('split-pane', splitPane);` for global use, or add `components: { splitPane }` to your Vue component options for local use.

[Vue warn]: Property or method "myResizeHandler" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or as a prop.

The `@resize` event handler specified in the template (e.g., `@resize="myResizeHandler"`) does not correspond to a method defined in the Vue instance or component.

fix

Define the method in your Vue component's `methods` option. For example: `methods: { myResizeHandler(newPercent) { console.log('Resized:', newPercent); } }`.

[Vue warn]: Missing required prop: "split"

The `split` prop, which specifies whether the pane should be 'vertical' or 'horizontal', was omitted from the `<split-pane>` component usage.

fix

Add the `split` prop and assign it either 'vertical' or 'horizontal'. For example: `<split-pane split="vertical">`.

Upgrade

Version history

1.0.6latest on npm

Audit

Dependencies

vuerequiredRuntime dependency; specifically requires Vue 2.x for core functionality.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/PanJiaChen/vue-split-pane ↗

packagehttps://www.npmjs.com/package/vue-splitpane ↗

homepagefile:///Users/jiachenpan/www/Github/PanJiaChen.github.io/split-pane/demo/index.html ↗