Toolbox
Version: 0.0.33
Created: 07/23/2025
Updated: 07/29/2025
A versatile toolbox component that supports up to eight fixed positions on the screen: top-left, top-center, top-right, middle-left, middle-right, and bottom zones. Each toolbox can be freely moved using drag-and-drop with mouse or touch gestures, while preventing overlap with existing toolboxes. Inside each toolbox, items can be reordered or moved between toolboxes, with positions and order saved for persistence. Perfect for customizable dashboards, design tools, or any interface requiring dynamic tool organization.
Installation guide for external usage
Note: Components is also available in Vue Play Studio via drag-and-drop.
Install using npm
npm install https://manager.vueplay.io/toolbox@latestInstall using npm from Vue Play registry
Token required for private and paid components
# .npmrc
@vueplayio:registry=https://manager.vueplay.io/
//manager.vueplay.io/:_authToken=tokenthen
npm install @vueplayio/toolboxClone using git
(Login to see access token)
git -c http.extraHeader="authorization-x: Bearer token" clone https://git.vueplay.io/git/0ecc2070-8086-4860-bc22-d3fb635a6128Embed using CDN
<!doctype html>
<html>
<head>
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js"
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script type="module">
import { createApp } from 'vue'
import App from 'https://manager.vueplay.io/toolbox@0.0.33/esm'
createApp(App).mount('#app')
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>© Copyright 2025 - Siglar Development AS