Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/nuxt/ui/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

The Slideover component is a panel that slides in from the edge of the screen, useful for navigation menus, forms, or additional content without navigating away from the current page.

​
Basic usage

<template>
  <div>
    <UButton @click="isOpen = true">Open Slideover</UButton>
    
    <USlideover v-model="isOpen">
      <div class="p-6">
        <h2>Slideover Content</h2>
        <p>This is the slideover panel content.</p>
      </div>
    </USlideover>
  </div>
</template>

<script setup lang="ts">
const isOpen = ref(false)
</script>

​
From different sides

<template>
  <USlideover v-model="isOpen" side="left">
    <div class="p-6">Content from left</div>
  </USlideover>
</template>

​
Props

​
modelValue
boolean
Control the slideover open state.
​
side
'left' | 'right' | 'top' | 'bottom'
default:"'right'"
Which side the slideover appears from.
​
overlay
boolean
default:"true"
Show overlay backdrop.
​
dismissible
boolean
default:"true"
Allow closing by clicking outside or pressing escape.

​
Events

​
update:modelValue
(value: boolean) => void
Emitted when the slideover is opened or closed.

Build docs developers (and LLMs) love

Get started for freeTalk to us