Getting Started

Installation

Get started with Vue Split Panel.

Install the package

Terminal
pnpm add @directus/vue-split-panel

Import the component's CSS

Either in JS if your bundler allows:

import '@directus/vue-split-panel/index.css';

Or in CSS

@import '@directus/vue-split-panel/index.css';

Import and use the SplitPanel component

MyComponent.vue
<script lang="ts" setup>
import { SplitPanel } from "@directus/vue-split-panel";
</script>

<template>
    <SplitPanel>
        <template #start>
            <p>Panel A</p>
        </template>

        <template #end>
            <p>Panel B</p>
        </template>
    </SplitPanel>
</template>