feat: frontends-recipes POC - login page

[Maciej D (mdanilowicz)]

📚 Add Frontends Recipes Documentation

✨ What is this MR about?

This MR introduces the foundation for Frontends Recipes: practical, end-to-end documentation pages that show how to build common storefront features with Shopware Frontends.

The goal is to go beyond isolated API or composable references and provide developers with real implementation-oriented examples. Recipes should answer questions like:

• “How do I build this storefront feature?”
• “Which composables should I combine?”
• “Where should this logic live?”
• “What is the recommended pattern in a real project?”

Instead of documenting only individual building blocks, recipes explain how those building blocks work together in actual storefront flows.

---

🎯 Why do we need Frontends Recipes?

Shopware Frontends already provides powerful APIs, composables, helpers, CMS components, and Nuxt integration. However, developers often need guidance on how to combine them correctly in practical scenarios.

Recipes help bridge the gap between:

• low-level API documentation,
• composable reference docs,
• template source code,
• and real production use cases.

They provide a more guided learning path for developers who want to build storefront features without having to reverse-engineer patterns from the demo store or existing templates.

---

🚀 What value does this bring?

Frontends Recipes should help us:

• 🧭 improve developer onboarding,
• 🧩 document common implementation patterns,
• 🔁 reduce repeated questions and support effort,
• 🛠️ make recommended usage easier to discover,
• 🧪 encourage consistent, testable storefront implementations,
• 🧱 provide reusable examples for real-world storefront features,
• 📖 make the documentation more task-oriented and actionable.

This should be especially useful for developers who are new to Shopware Frontends, but also for experienced teams that want a quick reference for recommended implementation patterns.

---

🧑‍💻 Example recipe topics

Potential recipes could cover flows such as:

• product listings and filters,
• product detail pages,
• cart interactions,
• checkout steps,
• customer login and registration,
• account pages,
• CMS page rendering,
• navigation handling,
• caching patterns,
• SEO/meta handling,
• working with Store API criteria,
• extending starter templates,
• using Nuxt layers for storefront customization.

---

🧠 Documentation approach

The recipes should be written from a practical perspective:

• start with the user goal,
• explain the relevant composables or APIs,
• show a complete implementation flow,
• mention important edge cases,
• link to deeper API/reference documentation,
• and provide copy-paste-friendly examples where useful.

The intention is not to duplicate the API reference, but to give developers a clear path from idea to implementation.

---

✅ Expected outcome

After this change, developers should have a clearer and more approachable way to learn how to build with Shopware Frontends.

Instead of asking “which API should I use?”, they can start from a recipe like “Build a product listing” or “Add products to cart” and follow a documented implementation path.

This should make the documentation more useful, more discoverable, and closer to how developers actually work when building storefronts.

---

🧪 Testing / verification

• Documentation structure reviewed
• Content checked for clarity and consistency
• Links and examples should be verified as recipes are added or expanded

---

Frontends recipes would give developers practical, end-to-end examples for common storefront flows. Instead of only documenting individual composables or APIs, recipes would show how to combine them in real scenarios like product listings, cart, checkout, customer accounts, CMS, or caching.
This should make onboarding faster, reduce repeated questions, and help teams build with more consistent patterns.

closes #2467

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
old-frontends-demo	Building	Preview, Comment	Jul 21, 2026 12:09pm
shopware-frontends-docs	Ready	Preview, Comment	Jul 21, 2026 12:09pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
frontends-starter-template-extended	Skipped		Jul 21, 2026 12:09pm
frontends-vue-starter-template	Skipped	Comment	Jul 21, 2026 12:09pm

[shopware-dev-docs-connector]

Developer Docs healthcheck

Status: Completed with success.
Repository: shopware/frontends
Commit: 646ec99
Preview: https://developer-documentation-e9hcseys1-shopware-frontends.vercel.app
Workflow run: #4538

[Copilot]

Pull request overview

This PR introduces the initial “Frontends Recipes” documentation section in apps/docs, including a first end-to-end “Login” recipe, plus supporting VitePress data loaders and UI components to visualize the flow and surface generated Store API schema/type information.

Changes:

• Added a new “Frontends Recipes” docs section with an Account area and a detailed Login recipe.
• Introduced interactive diagrams/components (LoginFlowDiagram, LoginVueFlowDiagram) and a SchemaTypeTooltip that displays summarized OpenAPI schema/type info.
• Added VitePress loaders for OpenAPI schema summaries and composables metadata, and wired recipes into the docs sidebar.

Reviewed changes

Copilot reviewed 12 out of 16 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Updates lockfile for new docs tooling dependencies.
apps/docs/package.json	Adds docs devDependencies and scripts for updating schema JSON files.
apps/docs/src/frontends-recipes/index.md	Adds the top-level “Frontends Recipes” landing page.
apps/docs/src/frontends-recipes/account/index.md	Adds the “Account” recipes landing page and links to Login.
apps/docs/src/frontends-recipes/account/login.md	Adds the end-to-end Login recipe content and references diagrams/tooltips.
apps/docs/.vitepress/sidebar.ts	Registers the new recipes section in the sidebar and updates composables loader import.
apps/docs/.vitepress/theme/components/ComposablesList.vue	Updates composables loader import path.
apps/docs/src/components/LoginFlowDiagram.vue	Adds a step-based login flow diagram with schema type tooltips.
apps/docs/src/components/LoginVueFlowDiagram.vue	Adds a Vue Flow-based login diagram with schema type tooltips.
apps/docs/src/components/SchemaTypeTooltip.vue	Adds a reusable tooltip component backed by OpenAPI schema summaries.
apps/docs/src/.data/openapi-schema.data.ts	Adds a VitePress loader that provides schema summaries to the UI.
apps/docs/src/.data/composables.data.ts	Adds a VitePress loader that extracts composables metadata via ts-dox.
apps/docs/src/.data/schema/openapi-resolver.ts	Adds a resolver for loading and indexing the docs OpenAPI schemas.
apps/docs/src/.data/schema/schema-summary.ts	Adds logic to summarize operations/schemas into tooltip-friendly data.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.