---
title: Overview
page_title: Splitter Overview - Components - Kendo UI for Vue
description: "Get an overview of the features the Kendo UI Splitter wrapper for Vue delivers and use the component in Vue projects."
slug: overview_splitter_wrapper
canonicalLink: "https://www.telerik.com/kendo-vue-ui/components/layout/splitter/"
position: 0
---

<div><WrapperBanner link="/kendo-vue-ui/components/layout/splitter"></WrapperBanner></div>    

# Splitter Overview

The Splitter provides a dynamic layout of resizable and collapsible panes.

The component converts the children of an HTML element into an interactive layout and adds resize and collapse handles depending on its configuration. The vertical and horizontal orientation of the Splitter can be combined to build complex layouts.

The Splitter wrapper for Vue is a client-side wrapper for the [Kendo UI Splitter](https://docs.telerik.com/kendo-ui/controls/layout/splitter/overview) widget.

<div data-component="StartFreeTrialSection"></div>

## Basic Usage

The following example demonstrates the Splitter in action.

{% meta height:380 %}
{% embed_file splitter/basic/main.vue preview %}
{% embed_file splitter/basic/main.js %}
{% endmeta %}

## Functionality and Features

* [Loading content with AJAX]({% slug loading_content_ajax_splitter %})
* [Keyboard navigation]({% slug keyboard_navigation_splitter_wrapper %})
* [RTL support]({% slug rtl_support_splitter %})

## Suggested Links

* [Kendo UI Splitter for jQuery](https://docs.telerik.com/kendo-ui/controls/layout/splitter/overview)
* [API Reference of the Splitter](https://docs.telerik.com/kendo-ui/api/javascript/ui/splitter)