An intuitive resizable panel groups/layouts components for Vue.
An intuitive resizable panel groups/layouts components for Vue.
Based on react-resizable-panels.
Install the package:
npm install vue-resizable-panels
# or
pnpm install vue-resizable-panels
# or
yarn add vue-resizable-panels
Import the components directly:
<script setup lang="ts">
import { Panel, PanelGroup, PanelResizeHandle } from "vue-resizable-panels";
</script>
<template>
<div>
<PanelGroup direction="horizontal">
<Panel :defaultSize="20" :minSize="20">
<div>left</div>
</Panel>
<PanelResizeHandle />
<Panel :minSize="30">
<div>middle</div>
</Panel>
<PanelResizeHandle />
<Panel :defaultSize="20" :minSize="20">
<div>right</div>
</Panel>
</PanelGroup>
</div>
</template>
For more examples, check out the demo.
For API reference, check out the react-resizable-panels's docs. The API is almost exactly the same, with minor differences as follows:
children
prop. This is taken care of by slots in Vue.className
prop. You can freely pass CSS classes via the class
attribute as Vue inherits attributes by default.pnpm install
cd packages/vue-resizable-panels/
pnpm dev
pnpm build
cd ../demo/
pnpm dev
This project was heavily inspired by the react-resizable-panels library so please give some love to the library as well!
Credits to @bvaughn (GitHub) for creating react-resizable-panels!