Vue 3 + Vite + Pinia SPA for the Kanban app. Drag-and-drop, markdown card descriptions, due dates, labels, checklists, light/dark theme, and an admin control panel.
Companion repos:
- Backend: https://github.com/Pack-dev/kanban-backend
- Orchestrator (docker-compose, canonical docs, agent definitions): https://github.com/Pack-dev/kanban-control-panel
npm install
npm run dev # http://localhost:5173 (proxies /api → http://localhost:8080)The dev server proxies /api to http://localhost:8080 (see vite.config.js), so run the backend on :8080 first.
npm run build
npm run preview/login,/register— public./boards— board list, create / rename / delete./boards/:id— board view with columns + cards. Drag cards within and across columns, drag columns. Click a card to open the modal: markdown description, due date, labels, checklist./admin— admin-only (role gated). List of users (promote / demote / delete) + all boards across users.
- Vue 3 Composition API with
<script setup>. - Vite, Pinia, Vue Router 4, Axios.
vuedraggable@nextfor drag-and-drop (use the:listprop — do not combine:model-value+@update:model-value+tag="transition-group"+ a computed source array; that pattern deadlocks the page).marked+DOMPurifyfor sanitized markdown rendering.
Pure custom CSS with a CSS-custom-property palette (paper, ink, accent, good, warn, label-1..8, shadow-card, etc), light + dark themes via data-theme on <html>, FOUC-prevention script in index.html, transitions fade and card. Respects prefers-reduced-motion. No UI kit, no Tailwind, no TypeScript.
auth— token + user (incl.role). Getters:isAuthenticated,isAdmin.boards—boards[]+currentBoard(hydrated). Column mutations live here (they touchcurrentBoard.columns[]).cards— card CRUD + cross-column move + label attach/detach + checklist mutations. All optimistic with snapshot rollback.
Mutation failures surface via useToast().error(...). Snapshot rollback restores currentBoard to its pre-mutation state.
- Booleans (e.g.
checklist.done) = integer0/1on the wire. - Dates =
YYYY-MM-DDstrings ornull. - Errors =
{"error": "<message>"}. - 404 on cross-user / cross-board; 403 on admin-only denial; 401 on missing/invalid token.
See the control-panel repo's doc/spec.md for the full API contract.