@window-splitter/vue

A full featured window splitter for Vue.

• Support for the full window splitter ARIA spec
• Support for percentage and pixel based constraints
• Collapsible panels
• Controlled panels
• Layout Persistance - LocalStorage and Cookie

Read the full docs

NOTE: Docs are currently on react but it's the same API. Refer the the stories for usage examples.

Installation

npm install @window-splitter/vue

Usage

<script setup>
import { PanelGroup } from "@window-splitter/vue";
</script>

<template>
  <PanelGroup>
    <Panel min="130px" max="400px" />
    <PanelResizer />
    <Panel min="130px" />
  </PanelGroup>
</template>

Features

• WAI-ARIA compliant
• Keyboard accessible
• Touch friendly
• Customizable
• TypeScript support

Prior Art

This library is heavily inspired by the following libraries:

• react-resizable-panels