@hungpvq/vue-draggable

@hungpvq/vue-draggable

Vue 3 adapter for @hungpvq/draggable (1.x.x).

Install

npm i @hungpvq/vue-draggable

Peers: vue, @hungpvq/draggable@<!-- docs-ver:draggable.peer -->^1.3.0<!-- /docs-ver:draggable.peer -->, vue-draggable-resizable, plus shared packages listed in package.json.

Styles

import '@hungpvq/vue-draggable/style.css';

Usage

<script setup lang="ts">
import {
  DraggableContainer,
  DraggableItemSideBar,
  DraggableItemPopup,
  DraggableItemFloat,
} from '@hungpvq/vue-draggable';
</script>

<template>
  <DraggableContainer>
    <DraggableItemSideBar show title="sidebar 1">
      <div style="height: 100vh"></div>
    </DraggableItemSideBar>
    <DraggableItemPopup show title="Popup 1" :top="10" :right="10">
      <div style="height: 100vh"></div>
    </DraggableItemPopup>
    <DraggableItemFloat
      show
      title="Float 1"
      :right="10"
      :bottom="10"
      :width="400"
      headerLocation="bottom"
    >
      <div style="height: 100vh"></div>
    </DraggableItemFloat>
  </DraggableContainer>
</template>

Prefer controlled v-model:show so store-driven open/close stays in sync.

Docs

• Hub: docs/index.md
• Stable API · a11y · testing
• SemVer: libs/draggable/README.md

Public surface: named root exports only. Experimental UI (ManagementControl, ContextMenu, …) lives in src/experimental.ts and is re-exported from the root for 1.x. Lock: src/public-api.spec.ts.

Internal chrome (DragButton, DragHeader, …) is not exported — use Stable shells / componentSidebarToggle.

Tests

npx nx test @hungpvq/vue-draggable
# or
npm run draggable:test

Contributing

When changing public exports: update src/index.ts / experimental.ts, public-api.spec.ts, and Stable docs together (draggable-semver-api skill).