{"id":15921,"library":"vue-splitpane","title":"Vue 2 Split Pane Component","description":"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.","status":"maintenance","version":"1.0.6","language":"javascript","source_language":"en","source_url":"https://github.com/PanJiaChen/vue-split-pane","tags":["javascript"],"install":[{"cmd":"npm install vue-splitpane","lang":"bash","label":"npm"},{"cmd":"yarn add vue-splitpane","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-splitpane","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency; specifically requires Vue 2.x for core functionality.","package":"vue","optional":false}],"imports":[{"note":"The component is exported as a default export. Named imports will fail.","wrong":"import { splitPane } from 'vue-splitpane';","symbol":"splitPane","correct":"import splitPane from 'vue-splitpane';"}],"quickstart":{"code":"import Vue from 'vue';\nimport splitPane from 'vue-splitpane';\n\n// Register as a global component\nVue.component('split-pane', splitPane);\n\nnew Vue({\n el: '#app',\n data: {\n percentL: 30,\n percentR: 70\n },\n methods: {\n resize(newPercent) {\n console.log('Pane resized to:', newPercent);\n this.percentL = newPercent;\n this.percentR = 100 - newPercent;\n }\n },\n template: `\n
\n \n \n \n \n
\n `\n});","lang":"javascript","description":"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."},"warnings":[{"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.","message":"This 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.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Always include `:split=\"'vertical'\"` or `:split=\"'horizontal'\"` when using the component. Example: ``.","message":"The `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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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`.","message":"The `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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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.","cause":"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).","error":"[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the 'name' option."},{"fix":"Define the method in your Vue component's `methods` option. For example: `methods: { myResizeHandler(newPercent) { console.log('Resized:', newPercent); } }`.","cause":"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.","error":"[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."},{"fix":"Add the `split` prop and assign it either 'vertical' or 'horizontal'. For example: ``.","cause":"The `split` prop, which specifies whether the pane should be 'vertical' or 'horizontal', was omitted from the `` component usage.","error":"[Vue warn]: Missing required prop: \"split\""}],"ecosystem":"npm"}