- Notifications
You must be signed in to change notification settings - Fork0
Prains/nuxt-vue-dragscroll
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
🖱️ A Nuxt module that adds drag-to-scroll functionality to your Nuxt application.
This module integrates thevue-dragscroll library into Nuxt, allowing you to easily add drag-to-scroll functionality to any element using the simplev-dragscroll directive.
- 🖱️Drag to scroll - Intuitive scrolling with mouse or touch
- 📱Mobile support - Full touch event support on mobile devices
- 🎯Simple usage - Just one directive
v-dragscroll - ⚡Zero-config - Works out of the box without additional configuration
- 🔧TypeScript support - Full TypeScript support
Install the module to your Nuxt application with one command:
# Using bun (recommended)bun add nuxt-vue-dragscroll# Or using npmnpm install nuxt-vue-dragscroll# Or using yarnyarn add nuxt-vue-dragscroll# Or using pnpmpnpm add nuxt-vue-dragscroll
Add the module to yournuxt.config.ts:
exportdefaultdefineNuxtConfig({modules:['nuxt-vue-dragscroll']})
That's it! You can now use thev-dragscroll directive in your Nuxt app ✨
<template> <divclass="scroll-container"v-dragscroll> <divclass="content"><!-- Your content with wide or tall area--> <divv-for="item in items":key="item.id"class="item"> {{ item.name }} </div> </div> </div></template><style>.scroll-container {width:400px;height:300px;overflow:auto;border:1pxsolid#ccc;}.content {width:800px;/* Wider than container for horizontal scroll*/height:600px;/* Taller than container for vertical scroll*/}</style>
<template> <divclass="horizontal-scroll"v-dragscroll> <divclass="horizontal-content"> <divv-for="i in 20":key="i"class="card" > Card {{ i }} </div> </div> </div></template><style>.horizontal-scroll {width:100%;height:200px;overflow-x:auto;overflow-y:hidden;}.horizontal-content {display:flex;gap:1rem;padding:1rem;width:max-content;}.card {min-width:200px;height:150px;background:#f0f0f0;border-radius:8px;display:flex;align-items:center;justify-content:center;}</style>
<template> <divclass="grid-container"v-dragscroll> <divclass="grid"> <divv-for="i in 1000":key="i"class="grid-cell" > {{ i }} </div> </div> </div></template><style>.grid-container {width:500px;height:400px;overflow:auto;border:2pxsolid#ddd;border-radius:8px;}.grid {display:grid;grid-template-columns:repeat(20,100px);gap:8px;padding:16px;}.grid-cell {width:100px;height:100px;background:#e3f2fd;border:1pxsolid#90caf9;border-radius:4px;display:flex;align-items:center;justify-content:center;font-weight:500;}</style>
This module includes a playground with a working example. To run it:
# Clone the repositorygit clone https://github.com/Prains/nuxt-vue-dragscrollcd nuxt-vue-dragscroll# Install dependenciesbun install# Run the playgroundbun run dev
- Make sure your container has fixed dimensions and
overflow: auto - Content inside the container should be larger than the container dimensions for scrolling to appear
- The directive works with both vertical and horizontal scrolling
- On mobile devices, scrolling works through touch events
- Can be applied to any elements: div, section, main, etc.
Local development
# Install dependenciesbun install# Generate type stubsbun run dev:prepare# Develop with the playgroundbun run dev# Build the playgroundbun run dev:build# Run ESLintbun run lint# Run testsbun runtestbun run test:watch# Type checkingbun run test:types# Release new versionbun run release
Contributions, issues and feature requests are welcome!
Feel free to check theissues page.
Give a ⭐ if this project helped you onGitHub!
About
No description, website, or topics provided.
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published