migrating-to-vendure-dashboard

vendure-ecommerce's avatarfrom vendure-ecommerce

Migrates Vendure Admin UI extensions (legacy Angular-based) to the new React Dashboard.

⭐6.8kstars🔀1.2kforks📁View on GitHub🕐Updated Nov 25, 2025
[Code Generation]

When & Why to Use This Skill

This Claude skill automates the complex process of migrating legacy Angular-based Vendure Admin UI extensions to the modern React-based Dashboard. By following structured migration protocols, it helps developers refactor forms, custom fields, list pages, and widgets, significantly reducing the manual effort required to upgrade Vendure plugins to the latest architecture.

Use Cases

  • Legacy Code Modernization: Automatically converting old Angular components and logic into React-based components compatible with the new Vendure Dashboard.
  • UI Extension Refactoring: Updating specific Admin UI elements such as custom field inputs, detail pages, and action bar items to meet new framework standards.
  • Architectural Compliance: Ensuring that migrated extensions follow the correct tsconfig setups and directory structures as defined in the official Vendure migration guides.
  • Plugin Porting: Assisting developers in porting existing third-party or internal plugins to support the latest versions of Vendure without starting from scratch.
nameMigrating to Vendure Dashboard
descriptionMigrates Vendure Admin UI extensions (legacy Angular-based) to the new React Dashboard.

Vendure Dashboard Migration

Instructions

  1. If not explicitly stated by the user, find out which plugin they want to migrate.
  2. Read and understand the overall rules for migration
    • ./01-general.md
    • ./01a-common-tasks.md
  3. Check the tsconfig setup . This may or may not already be set up.
    • ./01b-tsconfig-setup.md
  4. Identify each part of the Admin UI extensions that needs to be migrated, and use the data from the appropriate sections to guide the migration:
    • ./02-forms.md
    • ./03-custom-field-inputs.md
    • ./04-list-pages.md
    • ./05-detail-pages.md
    • ./06-adding-nav-menu-items.md
    • ./07-action-bar-items.md
    • ./08-custom-detail-components.md
    • ./09-page-tabs.md
    • ./10-widgets.md
  5. Ensure you have followed the instructions marked "Important" for each section