Slide
Slide
The Slide category provides off-canvas drawer components. XASlide is the high-level wrapper built on Nuxt UI's USlideover, offering built-in header, body, footer layout and optional trigger button. XASlidePanel is the lower-level primitive that teleports directly to <body> and supports all four entry directions.
Components
<XASlide />
A full-featured slideover that wraps USlideover. It manages its own open/close state (or accepts external v-model) and renders a structured layout with header, scrollable body, and optional footer. An optional trigger button can be configured entirely via props without needing a custom slot.
<!-- Controlled externally -->
<XASlide v-model="isOpen" title="User Details" size="lg">
<p>Slideover body content here.</p>
<template #footer>
<UButton @click="isOpen = false">Close</UButton>
</template>
</XASlide>
<!-- Self-contained with built-in trigger -->
<XASlide
title="Filters"
trigger-label="Open Filters"
trigger-icon="i-lucide-sliders"
side="left"
size="md"
>
<p>Filter controls here.</p>
</XASlide>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | Boolean | undefined | Controls open state via v-model. When omitted, component manages its own state. |
title | String | '' | Header title text. |
side | String | 'right' | Entry side — 'left' or 'right'. |
size | String | 'md' | Panel width — 'sm', 'md', 'lg', 'xl', or 'full'. |
triggerLabel | String | '' | Label for the auto-generated trigger button. |
triggerIcon | String | '' | Icon for the auto-generated trigger button. |
triggerColor | String | 'primary' | Color for the trigger button. |
triggerVariant | String | 'solid' | Variant for the trigger button. |
triggerSize | String | 'sm' | Size for the trigger button. |
Slots
| Slot | Description |
|---|---|
trigger | Custom trigger element (receives open function). |
header | Replaces the default title in the header. |
default | Scrollable body content. |
footer | Footer content — only renders when slot is provided. |
Exposed Methods
| Method | Description |
|---|---|
open() | Opens the slideover programmatically. |
close() | Closes the slideover programmatically. |
<XASlidePanel />
A lightweight, low-level slide panel that teleports to <body>. Supports all four entry sides (left, right, top, bottom) and manages transitions, overlay backdrop, and dismissal internally. Use this when you need full layout control without the opinionated header/body/footer structure of XASlide.
<XASlidePanel
v-model="showPanel"
side="bottom"
size="md"
:overlay="true"
:dismissible="true"
>
<div class="p-6">
<h2>Custom panel content</h2>
</div>
</XASlidePanel>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | Boolean | false | Controls panel visibility via v-model. |
side | String | 'right' | Entry direction — 'left', 'right', 'top', or 'bottom'. |
size | String | 'md' | Panel dimension — 'sm', 'md', 'lg', 'xl', or 'full'. For top/bottom sides this controls height; for left/right it controls width. |
overlay | Boolean | true | Show dark backdrop overlay behind the panel. |
dismissible | Boolean | true | Allow closing the panel by clicking the overlay. |
AI Context
category: Slide
package: "@xenterprises/nuxt-x-app"
use-when: >
Use XASlide when you need an off-canvas drawer with a standard header/body/footer
layout, an optional self-contained trigger button, and built-in open/close state
management. Use XASlidePanel when you need a bare teleported panel (e.g. mobile
bottom sheets, custom side drawers) with full control over internal layout.
Both components support v-model for external state control.