How 0ldfive/vue-print-designer works
Vue Print Designer is a visual print-template editor and runtime for labels, forms and receipts, with template management, data variables, pagination, export and browser/local/remote printing. The principal workflow is to edit a template on the canvas, manage its data and settings, then preview, print or export it. The README documents Web Components integration and client/cloud printing; some implementation paths are supported only at directory level because their source was not sampled.
Main entry points: PrintDesigner.vue Designer workspace · usePrint.ts Print orchestration · designer Designer state · Canvas.vue Canvas editor
Components 22
App integration
- Vue app shell
src/App.vue - Web Component API
src/web-component.ts
Template design
- Designer workspace
src/components/PrintDesigner.vue - Canvas editor
src/components/canvas/Canvas.vue - Print elements
src/components/elements - Editor panels
src/components/layout - Floating panels
src/components/print-designer
Template and data
- Designer state
src/stores/designer - Editing actions
src/stores/designer/actions - Template management
src/stores/templates.ts - Variable processing
src/utils/variables.ts - Design model
src/types/index.ts
Rendering and print
- Preview UI
src/components/layout/PreviewModal.vue - Print renderer
src/components/print/PrintRenderer.vue - Print orchestration
src/utils/print/usePrint.ts - Render engine
src/utils/print/renderEngine - Print settings
src/composables/usePrintSettings.ts
Other components
- Designer user
- Print client
- Browser printer
- Remote print service
- Template API
Connections 26
- Vue app shell → Designer workspace: renders
src/App.vue - Vue app shell → Print renderer: renders
src/App.vue - Web Component API → Designer workspace: wraps
src/web-component.ts - Designer user → Designer workspace: edits templates
README.md - Designer workspace → Canvas editor: renders
src/components/PrintDesigner.vue - Designer workspace → Editor panels: renders
src/components/PrintDesigner.vue - Designer workspace → Floating panels: renders
src/components/PrintDesigner.vue - Canvas editor → Designer state: reads and updates
src/components/canvas/Canvas.vue - Canvas editor → Print elements: renders
src/components/canvas/Canvas.vue - Designer workspace → Designer state: uses
src/components/PrintDesigner.vue - Designer state → Editing actions: delegates to
src/stores/designer/index.ts - Designer state → Design model: models state
src/stores/designer/state.ts - Designer workspace → Template management: manages templates
src/components/PrintDesigner.vue - Template management → Designer state: reads design state
src/stores/templates.ts - Template management → Template API: fetches remotely
README.md - Canvas editor → Variable processing: uses
src/components/canvas/Canvas.vue - Preview UI → Template management: loads template data
src/components/layout/PreviewModal.vue - Preview UI → Print orchestration: invokes
src/components/layout/PreviewModal.vue - Print orchestration → Designer state: reads design state
src/utils/print/usePrint.ts - Print orchestration → Print settings: uses settings
src/utils/print/usePrint.ts - Print orchestration → Render engine: renders pages
src/utils/print/usePrint.ts - Print orchestration → Browser printer: browser prints
README.md - Print orchestration → Print client: dispatches local jobs
README.md - Print orchestration → Remote print service: dispatches cloud jobs
README.md - Print settings → Print client: connects by WebSocket
src/composables/usePrintSettings.ts - Print renderer → Render engine: renders output