Slaydover: Responsive Overlay & Drawer Component for Vue and Nuxt

Slaydover: A responsive overlay component for Vue 3 and Nuxt that adjusts position based on screen breakpoints.

Key features:

📱 Position changes by breakpoint (e.g., bottom on mobile, right on desktop)

👆 Swipe-to-close gestures thatmatch the entry direction

🎯 Works from all four sides with configurable breakpoints

⚡ Custom animation speeds and overlay styling

🔒 Smart scroll detection prevents gesture conflicts

Works great for navigation drawers, shopping carts, and filter panels that need different behavior across device sizes.

Simple API with v-model binding and position strings like “bottom md:right”.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Leave a Reply