@edvanta/vue-split-layout-v3

A modern, high-performance Vue 3 port of the original vue-split-layout by Luis Figueiredo.

This package provides a flexible, draggable, and resizable split layout system designed specifically for Vue 3, featuring zero runtime dependencies and a significantly reduced bundle size.

🚀 Quick Start

Installation

npm install @edvanta/vue-split-layout-v3

Basic Usage

<template>
  <Layout :splits="layout">
    <Pane title="Pane 1">Content 1</Pane>
    <Pane title="Pane 2">Content 2</Pane>
  </Layout>
</template>

<script setup>
import { Layout, Pane } from '@edvanta/vue-split-layout-v3'
import '@edvanta/vue-split-layout-v3/style.css'

const layout = {
  dir: 'horizontal',
  first: 0,
  second: 1
}
</script>

📺 Live Demo

You can view the live demo (Composition API) here: 👉 Live Demo (Note: The link above assumes GitHub Pages hosting. You can also run it locally: npm run dev)

📖 Detailed Documentation

For advanced usage, including dynamic panes, Pinia integration, and Composition API examples, see the full documentation:

👉 View Full Documentation

Key Improvements in this Port

• Vue 3 Native: Rewritten to leverage Vue 3's high-performance reactivity system.
• Vite Powered: Uses Vite for lightning-fast development and optimized builds.
• Zero Dependencies: Removed lodash dependency, reducing bundle size from 34.3kB to 14.0kB.
• Fixed Core Bugs: Addressed legacy bugs related to state cloning and fragment rendering.
• Mobile Responsive & Pointer Events: Fully responsive layout system supporting Pointer Events for universal mouse, touchscreen, and emulation compatibility. Keeps vertical scroll intact on mobile views while limiting dragging to explicitly-defined [pane-drag] drag handles. Prevents drag interference with nested interactive children (such as buttons, inputs, links, etc.).

📄 Credits

This project is a Vue 3 port of vue-split-layout (NPM: vue-split-layout). All original layout logic and design patterns belong to the original author.

📄 License

MIT © Edvanta