Vue Draggable Popup

A lightweight, TypeScript-friendly Vue 3 library that provides a draggable, resizable popup component designed to work alongside Quasar UI (optional). Exports a plugin and named component for easy integration.

Package: vue-draggable-popup

Highlights

• TypeScript friendly: component uses <script setup lang="ts"> and ships with a TS shim.
• Draggable & Resizable: native mouse/touch handlers for drag and resize.
• z-index management: simple utilities to keep popups on top.
• Small reactive store: supports single-open-popup behavior (toggle allowMultiple).

Peer dependencies

• vue ^3.x
• quasar ^2.x (only used by the component's default header markup; header slot can be used instead to avoid Quasar dependency)

Quick Install (consumer)

Install from npm:

npm install vue-draggable-popup
# Ensure your project provides Vue and (optionally) Quasar
npm install vue
npm install quasar

Usage (global plugin)

// main.ts (consumer app)
import { createApp } from 'vue'
import App from './App.vue'
import VueDraggablePopup from 'vue-draggable-popup'

const app = createApp(App)
app.use(VueDraggablePopup)
app.mount('#app')

Then in any component template:

<template>
  <DraggablePopup v-model="show" :useHeader="true" label="Hello">
    <div>Popup body content</div>
  </DraggablePopup>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const show = ref(true)
</script>

Usage (named import)

import { DraggablePopup } from 'vue-draggable-popup'

Register locally in a component if preferred.

Component API

• Props

  • modelValue (boolean) — required. Controls visibility (v-model).
  • useHeader (boolean) — default false. Show header area.
  • useCustomHeader (boolean) — default false. Use the custom_header slot.
  • color (string) — header background color (used when not useCustomHeader).
  • label (string) — header center label.
  • hideCloseBtn (boolean) — default false.
  • dragHandleSelector (string | null) — CSS selector to find custom drag handle inside popup.
  • resetZIndexOnClose (boolean) — default true.
  • minWidth, minHeight, maxWidth, maxHeight, width, height (numbers) — sizing.
  • resizable (boolean) — default true.
  • popupId (string | null) — identifier used by store when allowMultiple is false.
  • allowMultiple (boolean) — default false. When false, opening another popup closes the previous one.

• Emits

  • update:modelValue (boolean) — v-model update when popup closed/opened.
  • update:width (number) — emitted during resize.
  • update:height (number) — emitted during resize.

• Slots

  • default — popup content body.
  • header — left header slot (used with default header markup).
  • header_right_slot — right side header slot.
  • custom_header — full custom header markup when useCustomHeader is true.

Notes about Quasar

• The component's default header includes Quasar components (q-bar, q-btn, q-tooltip). If you prefer no Quasar dependency, either:
  • Provide useCustomHeader plus the custom_header slot and use plain HTML/CSS for the header, or
  • Replace the default header markup in src/components/DraggablePopup.vue with your preferred UI elements.

This project builds in Vite library mode and externalizes vue and quasar as peers.