Vue 2 Split Pane Component

Common errors

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

  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).
  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.

  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.
  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"

  cause 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">`.

Warnings

• breaking 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.
  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.
• gotcha 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.
  Fix: Always include `:split="'vertical'"` or `:split="'horizontal'"` when using the component. Example: `<split-pane split="vertical">`.
• gotcha 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.
  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`.

Install

• npm install vue-splitpane npm
• yarn add vue-splitpane yarn
• pnpm add vue-splitpane pnpm

Imports

• splitPane
  wrong:

  import { splitPane } from 'vue-splitpane';

  correct:

  import splitPane from 'vue-splitpane';

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

Quickstart

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>
  `
});