vue-allotment

Vue Allotment

A Vue 3 port of the popular React Allotment component library. This library provides resizable split views for Vue applications, perfect for creating complex layouts with draggable dividers.

Features

• 🎯 Vue 3 Composition API - Built with modern Vue 3 and TypeScript
• 📱 Responsive - Works on desktop and mobile devices
• 🎨 Customizable - Full CSS customization support
• 🔧 TypeScript - Complete type safety and IntelliSense
• ⚡ Performant - Optimized for smooth interactions
• 🧩 Flexible - Supports horizontal, vertical, and nested layouts

Installation

npm install vue-allotment
# or
pnpm add vue-allotment
# or
yarn add vue-allotment

Quick Start

<script setup>
import { Allotment, Pane } from 'vue-allotment'
import 'vue-allotment/style.css'
</script>

<template>
  <Allotment>
    <Pane>
      <div>Left Panel</div>
    </Pane>
    <Pane>
      <div>Right Panel</div>
    </Pane>
  </Allotment>
</template>

Basic Usage

Horizontal Split (Default)

<template>
  <Allotment>
    <Pane min-size="{200}">
      <div>Left side</div>
    </Pane>
    <Pane>
      <div>Right side</div>
    </Pane>
  </Allotment>
</template>

Vertical Split

<template>
  <Allotment vertical>
    <Pane>
      <div>Top panel</div>
    </Pane>
    <Pane>
      <div>Bottom panel</div>
    </Pane>
  </Allotment>
</template>

Custom Sizes

<template>
  <Allotment :default-sizes="[200, 300, 100]">
    <Pane>
      <div>200px wide</div>
    </Pane>
    <Pane>
      <div>300px wide</div>
    </Pane>
    <Pane>
      <div>100px wide</div>
    </Pane>
  </Allotment>
</template>

Component Props

Allotment Props

Prop	Type	Default	Description
defaultSizes	number[]	-	Initial sizes for each pane
vertical	boolean	false	Split direction
separator	boolean	true	Show separator between panes
proportionalLayout	boolean	true	Resize proportionally
minSize	number	30	Global minimum pane size
maxSize	number	Infinity	Global maximum pane size
snap	boolean	false	Enable snapping to zero
className	string	-	Custom CSS class

Pane Props

Prop	Type	Default	Description
minSize	number	-	Minimum size for this pane
maxSize	number	-	Maximum size for this pane
preferredSize	number | string	-	Preferred size (px or %)
priority	'Normal' | 'Low' | 'High'	'Normal'	Resize priority
snap	boolean	false	Enable snapping for this pane
visible	boolean	true	Pane visibility
className	string	-	Custom CSS class

Events

<script setup>
function onSizeChange(sizes) {
  console.log('New sizes:', sizes)
}

function onDragStart(sizes) {
  console.log('Drag started with sizes:', sizes)
}

function onDragEnd(sizes) {
  console.log('Drag ended with sizes:', sizes)
}

function onReset() {
  console.log('Panes were reset')
}
</script>

<template>
  <Allotment
    @change="onSizeChange"
    @drag-start="onDragStart"
    @drag-end="onDragEnd"
    @reset="onReset"
  >
    <!-- panes -->
  </Allotment>
</template>

Programmatic Control

<script setup>
import { ref } from 'vue'
import { Allotment, Pane } from 'vue-allotment'

const allotmentRef = ref()

function reset() {
  allotmentRef.value?.reset()
}

function resize() {
  allotmentRef.value?.resize([300, 400])
}
</script>

<template>
  <div>
    <button @click="reset">
      Reset
    </button>
    <button @click="resize">
      Custom Resize
    </button>

    <Allotment ref="allotmentRef">
      <Pane>Panel 1</Pane>
      <Pane>Panel 2</Pane>
    </Allotment>
  </div>
</template>

Styling

The component uses CSS modules and provides CSS custom properties for theming:

:root {
  --focus-border: #007fd4;
  --separator-border: rgba(128, 128, 128, 0.35);
  --sash-size: 8px;
  --sash-hover-size: 4px;
  --sash-hover-transition-duration: 0.1s;
}

Development

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Run type checking
pnpm vue-tsc

Credits

This Vue port is based on the excellent Allotment React library by John Walley.

License

MIT