Getting Started

Vue DNDNR is a Vue 3 component library that provides powerful, flexible, and type-safe draggable and resizable functionality for your applications.

What is Vue DNDNR?

Vue DNDNR offers both component-based and composable hook-based approaches to implement drag and resize features in your Vue 3 applications. The library is built with TypeScript and follows modern Vue 3 composition API patterns, making it highly flexible and easy to integrate.

Core Features

• Dual API Approach: Use either pre-built components or composable hooks based on your needs
• Draggable Elements: Create elements that can be moved with mouse or touch input
• Resizable Elements: Add resize handles to elements with customizable constraints
• Combined DnR Functionality: Seamlessly combine drag and resize capabilities
• TypeScript Support: Full type safety with comprehensive TypeScript definitions
• Vue 3 Composition API: Built using the latest Vue 3 patterns and best practices
• Customizable Constraints: Set boundaries, grid snapping, and size limits
• Event Handling: Rich event system for responding to user interactions
• Touch Support: Works on both desktop and touch devices
• Accessibility: Keyboard navigation support and ARIA attributes

Components and Hooks

Vue DNDNR provides three main components:

• <Draggable>: For creating draggable elements
• <Resizable>: For creating resizable elements
• <DnR>: For elements that need both drag and resize functionality

Each component has a corresponding composable hook:

• useDraggable(): Hook for adding drag functionality
• useResizable(): Hook for adding resize functionality
• useDnR(): Hook combining both drag and resize capabilities

Next Steps

• Installation - Install Vue DNDNR in your project
• API Reference - Explore the available components and hooks
• Playground - Try out the interactive playgrounds
• Project Progress - Check the current development status