Vue components¶

The admin UI is built as three self-contained Vue 2 web components compiled to standalone JS bundles. PHP injects them into the WooCommerce subscription pages as custom HTML elements.

Components¶

Element	Source	Bundle	Purpose
`<admin-app-cancel>`	`app/src/AppCancelButton.vue`	`src/assets/js/cancel-button/`	Opens a reason picker and cancels the subscription
`<admin-app-pause>`	`app/src/AppPauseButton.vue`	`src/assets/js/pause-button/`	Opens a date picker and pauses until a chosen date
`<admin-app-activate>`	`app/src/AppActivateButton.vue`	`src/assets/js/activate-button/`	Force-activates an on-hold subscription

Attributes¶

Each component receives two attributes from PHP:

Attribute	Description
`subscription-id`	WooCommerce subscription ID
`nonce`	`wp_create_nonce('wp_rest')` — used as `X-WP-Nonce` header on REST calls

Building¶

cd app
npm install
npm run build   # compiles all three entry points

Compiled .min.js bundles are committed to src/assets/js/ and loaded by PHP via wp_enqueue_script.

Where components are injected¶

Subscription detail page — Backend\Subscriptions::insert_status_actions() hooks on woocommerce_admin_order_data_after_order_status.
Subscription list — Backend\Subscriptions::overview_actions() hooks on woocommerce_subscription_list_table_actions and replaces the default cancel/pause/activate action links with component placeholders.