Golden Path — Frontend overview

The Golden Path (Frontend) is about how to organize files once your plugin grows beyond a single widget file. Required runtime pieces (frontend/index.ts, usePluginApi, i18n, generated-config) are documented under How to use — use those first; this section is lighter than the backend Golden Path on purpose.

Vue today

Docs assume Vue 3. React support is planned via a Vite abstraction.

Stack (short)

Layer	Role
Core	Plugin registration, store
Orchestrator	Compositions, slots, widgets, URL state
Theme	App UI kit (Vuetify, …) — How to use — Themes
Your plugin	frontend/index.ts, widgets/, optional components/ / composables/

UI concepts

• Composition — workbench layout (grid of widgets).
• Slot — where a composition is shown (page, modal, inline).
• Widget — your *Widget.vue + setup.ts; only the folder contract is fixed.

URL parameters for a slot become widget props automatically. Reading/writing them in depth: Routing & URL state (advanced).

Golden Path folder shape

frontend/
├── index.ts
├── generated-config.ts      # from backend
├── widgets/
│   └── TodoList/
│       ├── TodoListWidget.vue   # entry only — keep thin
│       └── setup.ts
├── components/                # shared across widgets (recommended)
└── composables/

Minimal: all logic in one *Widget.vue — fine for icons or demos.

Golden Path: *Widget.vue as entry; reuse components & composables with normal Vue best practices.

Page map

Kind	Page
How to use	Plugin index · usePluginApi · i18n · generated-config · Themes
Golden Path	Widgets · Vue structure
Advanced	Routing · Exports & styles
Index	Frontend reference