skills.rest
vendurehq
vendurehqOFFICIAL
Explore all skills by this author →
Website𝕏@vendure_ioGitHub

vendure-dashboard-migration

Migrates Vendure Admin UI extensions from Angular to the React Dashboard.

8.4k|1.5k|Updated Jun 11, 2018
Search Tags:#plugin#Angular#Dashboard#Vendure#reAct#graphqL#Migration
One-click install
npx skills add https://github.com/vendurehq/vendure --skill vendure-dashboard-migration
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vendure-dashboard-migration
Source: https://github.com/vendurehq/vendure/tree/main/skills/vendure-dashboard-migration
Command: npx skills add https://github.com/vendurehq/vendure --skill vendure-dashboard-migration

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Migrating Vendure plugin Admin UI extensions from the legacy Angular-based Admin UI to the new React Dashboard involves many framework-specific rewrites across forms, list pages, detail pages, widgets, and navigation, which is error-prone without structured guidance.

Core Features & Use Cases

  • Side-by-side migration patterns: Provides old (Angular) versus new (React Dashboard) code examples for forms, custom field inputs, list pages, detail pages, nav menu items, action bar items, custom detail components, page tabs, and widgets.
  • Project setup guidance: Covers tsconfig configuration for JSX and path mapping, plus directory structure conventions for the new dashboard code.
  • Use Case: A developer maintaining a Vendure plugin with an Angular-based Admin UI extension needs to port a product review list page and detail form to the React Dashboard using ListPage, useDetailPage, and TanStack Query.

Quick Start

Migrate my Vendure plugin's Angular Admin UI extension to the new React Dashboard.

Frequently Asked Questions about vendure-dashboard-migration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate a Vendure Admin UI extension from Angular to React?▼

Move code from the plugin's ui directory to a dashboard directory, register it via the dashboard property in @VendurePlugin pointing to index.tsx, and rewrite components using @vendure/dashboard imports. Keep the existing AdminUiExtension definition for backward compatibility.

How do I convert an Angular list page to the Vendure React Dashboard?▼

Replace TypedBaseListComponent with the ListPage component from @vendure/dashboard, passing your GraphQL list query, route, and optional deleteMutation. Use customizeColumns for custom cells and defaultVisibility for column visibility instead of vdr-dt2-column templates.

What replaces DataService queries in the Vendure React Dashboard?▼

Use useQuery from @tanstack/react-query with the api.query method from @vendure/dashboard and documents created with graphql from @/gql. GraphQL fragments must be explicitly referenced in every document that uses them with gql-tada.

Does the Vendure React Dashboard support page tabs?▼

No, page tabs are not supported by the new React Dashboard. The recommended alternative is to create a separate route for the content that previously lived in a tab.

Why do my Vendure dashboard extension imports fail TypeScript resolution?▼

You need a tsconfig with jsx set to react-jsx and path mappings for @/gql pointing to your generated GraphQL types and @/vdb/* pointing to node_modules/@vendure/dashboard/src/lib/*. In monorepos this must be configured per plugin project.

Related Skills

Explore More Software Engineering Skills→
vendurehqvendurehq
8.3k

Migrating to Vendure Dashboard

Migrate Angular Vendure Admin UI extensions to the React Dashboard.

Official
Intermediate
phuong-nam-devphuong-nam-dev

Migrating to Vendure Dashboard

Migrates Vendure Admin UI extensions from Angular to the React Dashboard.

Community
Advanced
saleorsaleor
1.5k

graphql-workflow

Synchronize GraphQL schemas with generated TypeScript types via graphql-codegen.

Official
Intermediate
OpenElementsLabsOpenElementsLabs

api-design

Design and review public Java APIs with interfaces, records, and module boundaries.

Official
Advanced