Create a resizable split-view to partition the UI.

👉 CodePen Demo

npm i vue-split-view

import VueSplitView from 'vue-split-view'

import VueSplitView from 'vue-split-view/dist/vue2'

• Load the CSS stylesheet: vue-split-view/dist/style.css

import VueSplitView from 'vue-split-view/dist/vue3.esm.js'

vue-split-view/dist/vue3.umd.js

<split-view>
	<template #A>
		Slot A
	</template>

	<template #B>
		Slot B
	</template>
</split-view>

<split-view direction="vertical">
	<template #A>
		Slot A
	</template>

	<template #B>
		Slot B
	</template>
</split-view>

<split-view
	direction="horizontal"
	a-init="100px"
	a-min="50px"
	a-max="200px"
>
	<template #A>
		Slot A
	</template>

	<template #B>
		Slot B
	</template>
</split-view>

<split-view direction="horizontal">
	<template #A>
		Slot A
	</template>

	<template #B>
		<split-view direction="vertical">
			<template #A>
				Slot BA
			</template>

			<template #B>
				Slot BB
			</template>
		</split-view>
	</template>
</split-view>

Type: String

Default: horizontal

The direction the split-view should be partitioned in. Possible values are: horizontal, vertical.

Type: String

Default: none

The initial width/height of the first partition. The second partition fills the remaining width/height. Numeric values translate to pixels, string values are directly used for the width/height CSS property.

Type: String

Default: none

The minimum width/height of the first partition. This influences the second partition's maximum width/height. The value is directly used for the min-width/min-height CSS property.

Type: String

Default: none

The maxium width/height of the first partition. This influences the second partition's minimum width/height. The value is directly used for the max-width/max-height CSS property.

Content of the first partition.

Content of the second partition.