page-generator

Start from the component tree, then decide state placement using a decision tree: local ref for simple state, a Composable for complex page logic, and Vuex or Pinia only for cross-page shared state. Then map API endpoints, draw Props-down and Emits-up data flow, and define the route config.

Use a Composable when state is page-local but involves more than three API calls or five state fields. Use Vuex or Pinia only when state must be shared across pages, adding persistence plugins if it must survive reloads. Simple state stays as ref or reactive in the page container.

No, it outputs an implementation blueprint rather than business code. It provides directory structures, state tables, API specs, route snippets, and container pseudocode showing structure only, so developers or AI code generators implement the actual .vue files.

It accepts the component tree with Props and Emits from component-generator, PAGE_SPECS data-source mappings from design documents, and interaction flows from low-fidelity prototypes. These inputs are mapped to files, state, endpoints, and routes.

The blueprint concepts such as directory structure, state tables, and API layer design apply to both Vue and React, but the concrete conventions shown, like Composables, Vuex or Pinia, and Vue Router config, target Vue 3 projects.