Nuxt Vue Dragscroll

🖱️ A Nuxt module that adds drag-to-scroll functionality to your Nuxt application.

This module integrates the vue-dragscroll library into Nuxt, allowing you to easily add drag-to-scroll functionality to any element using the simple v-dragscroll directive.

✨ Features

• 🖱️ 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

🚀 Quick Setup

Install the module to your Nuxt application with one command:

# Using bun (recommended)
bun add nuxt-vue-dragscroll

# Or using npm
npm install nuxt-vue-dragscroll

# Or using yarn
yarn add nuxt-vue-dragscroll

# Or using pnpm
pnpm add nuxt-vue-dragscroll

Add the module to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    'nuxt-vue-dragscroll'
  ]
})

That's it! You can now use the v-dragscroll directive in your Nuxt app ✨

📖 Usage

Basic Example

<template>
  <div class="scroll-container" v-dragscroll>
    <div class="content">
      <!-- Your content with wide or tall area -->
      <div v-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: 1px solid #ccc;
}

.content {
  width: 800px; /* Wider than container for horizontal scroll */
  height: 600px; /* Taller than container for vertical scroll */
}
</style>

Horizontal Scrolling

<template>
  <div class="horizontal-scroll" v-dragscroll>
    <div class="horizontal-content">
      <div 
        v-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>

Grid with Two-Dimensional Scrolling

<template>
  <div class="grid-container" v-dragscroll>
    <div class="grid">
      <div 
        v-for="i in 1000" 
        :key="i" 
        class="grid-cell"
      >
        {{ i }}
      </div>
    </div>
  </div>
</template>

<style>
.grid-container {
  width: 500px;
  height: 400px;
  overflow: auto;
  border: 2px solid #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: 1px solid #90caf9;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}
</style>

🎮 Interactive Example

This module includes a playground with a working example. To run it:

# Clone the repository
git clone https://github.com/Prains/nuxt-vue-dragscroll
cd nuxt-vue-dragscroll

# Install dependencies
bun install

# Run the playground
bun run dev

💡 Usage Tips

• 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.

🛠️ Development

Local development

# Install dependencies
bun install

# Generate type stubs
bun run dev:prepare

# Develop with the playground
bun run dev

# Build the playground
bun run dev:build

# Run ESLint
bun run lint

# Run tests
bun run test
bun run test:watch

# Type checking
bun run test:types

# Release new version
bun run release

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check the issues page.

⭐ Show your support

Give a ⭐ if this project helped you on GitHub!