Slide
Slide
Full-featured slideover built on USlideover with header, body, footer slots and optional built-in trigger button.
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. |
AI Context
component: XASlide
package: "@xenterprises/nuxt-x-app"
category: Slide
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. Supports v-model for external state control. Use XASlidePanel instead
when you need a bare teleported panel with full layout control.