magewire

Build reactive, server-driven Magento 2 UI components with PHP and Alpine.js via AJAX updates.

262|47|Updated Oct 8, 2021

Search Tags:#php #components #reactive #livewire #magento #alpinejs #magewire

Ready to run

npx skills add https://github.com/magewirephp/magewire --skill magewire

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: magewire
Source: https://github.com/magewirephp/magewire/tree/main/.claude/skills/magewire
Command: npx skills add https://github.com/magewirephp/magewire --skill magewire

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires magewire-portman.

What problem does it solve?

Magewire provides a reactive, server-driven UI paradigm for Magento 2 using PHP, enabling dynamic components without writing JavaScript.

Core Features & Use Cases

PHP-based components render PHTML templates and communicate with the server via AJAX to update the UI in place.
Alpine.js is used as the frontend glue for reactivity, while Livewire-inspired lifecycle hooks and events enable rich interactivity.
It supports directives like wire:* and component composition across blocks and layouts to build complex Magento UIs.

Quick Start

Define a Magewire component class, register it in a layout XML, and render the associated PHTML template.

Frequently Asked Questions about magewire

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

FAQPage Schema

How do I build reactive Magento 2 UI components without writing JavaScript?▼

You can build reactive Magento 2 UI components entirely in PHP by defining component classes that render PHTML templates and communicate with the server via AJAX. This server-driven approach uses Alpine.js for frontend reactivity without requiring custom JavaScript.

How does Alpine.js work with PHP components for Magento reactivity?▼

Alpine.js acts as frontend glue for Magento reactivity, handling UI updates in place while PHP component classes manage server-side logic. AJAX requests update the UI seamlessly, combining Livewire-inspired lifecycle hooks with Alpine.js for rich interactivity.

How do I set up a reactive Magento component using PHP and layout XML?▼

To set up a reactive Magento component, define a Magewire component class, register it within your layout XML, and render the associated PHTML template. This process connects the PHP backend logic directly to the frontend block.

Can I use Livewire-inspired lifecycle hooks and events in Magento 2?▼

Yes, you can use Livewire-inspired lifecycle hooks and events to enable rich interactivity in Magento 2. These hooks integrate with wire:* directives to support component composition across blocks and layouts for complex UI workflows.

Do I need magewire-portman to build server-driven Magento components?▼

Yes, magewire-portman is a required dependency to build server-driven Magento components. It satisfies necessary requirements for component lifecycle management, event handling, and directive integration.

What are the limitations of using wire directives for Magento UI updates?▼

The wire:* directives facilitate AJAX updates and component composition across Magento blocks and layouts. While they enable complex UI workflows, the architecture remains server-driven, meaning UI updates depend on server round-trips for state changes.