slaydover

Responsive SlideOver Component for Vue & Nuxt

A lightweight, swipeable slide-over component for Vue and Nuxt, perfect for modals, drawers, and overlays with responsive positioning and smooth gestures.

Installation

Install the package via npm:

npm install @crossatko/slaydover

# Global insallation

In your main entry file (e.g., main.js or main.ts):

import { createApp } from 'vue'
import App from './App.vue'
import Slaydover from '@crossatko/slaydover'
import '@crossatko/slaydover/style.css'

const app = createApp(App)
app.component('Slaydover', Slaydover)
app.mount('#app')

# Local installation

Import the Slaydover and styles in your Vue component:

<script setup lang="ts">
import Slaydover from '@crossatko/slaydover'
import '@crossatko/slaydover/style.css'
</script>

# Nuxt

You can also use provided Nuxt module for automatic registration:

export default defineNuxtConfig({
  modules: ['@crossatko/slaydover/nuxt']
})

Props & Slots

# Props

# Position Syntax Examples

• bottom → Always slides from bottom.
• top md:right → Top on small screens, right on medium and larger.
• left md:bottom xl:right → Left on mobile, bottom on tablets, right on large screens.

# Slots

• default: Main content inside the slide-over.
• overlay: Custom overlay background (defaults to semi-transparent dark backdrop).

Example

<script setup lang="ts">
import { ref } from 'vue'
import Slaydover from '@crossatko/slaydover'
import '@crossatko/slaydover/style.css'

const open = ref(false)
</script>

<template>
  <button @click="open = true">Open slaydover</button>

  <Slaydover v-model="open" position="bottom sm:top lg:right">
    <div class="content">Your awesome content 👌</div>
  </Slaydover>
</template>

<style>
.content {
  padding: 1rem;
  background: white;
}
</style>

Demo Source