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>