skills.rest
magewirephp
magewirephpCOMMUNITY
Explore all skills by this author →
𝕏@magewirephpGitHub

magewire-javascript

Write CSP-safe Magewire JavaScript for Magento 2 themes.

262|47|Updated Oct 8, 2021
Search Tags:#javascript#csp#addon#alpinejs#magento-2#magewire
One-click install
npx skills add https://github.com/magewirephp/magewire --skill magewire-javascript
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: magewire-javascript
Source: https://github.com/magewirephp/magewire/tree/main/.claude/skills/magewire-javascript
Command: npx skills add https://github.com/magewirephp/magewire --skill magewire-javascript

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a CSP-compliant, Magewire-first JavaScript approach for Magento 2 themes, enabling secure, maintainable UI reactivity without inline scripts or unsafe eval usage.

Core Features & Use Cases

  • CSP-safe JavaScript structure for Magewire-driven components
  • AlpineJS integration with Magewire lifecycle hooks for clean, reusable UI patterns
  • Clear separation of concerns with utilities, addons, directives, and feature bridges
  • Works across base and frontend view areas, enabling theme-agnostic frontend components

Quick Start

Create your first CSP-safe Magewire JavaScript by registering an Alpine component that reads from a Magewire addon.

Frequently Asked Questions about magewire-javascript

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

FAQPage Schema
How do I write CSP-safe JavaScript for Magento 2 themes using Magewire?▼

CSP-safe Magewire JavaScript relies on a standardized, framework-agnostic approach that handles CSP nonce and hash via the Magewire fragment, avoiding inline scripts and unsafe eval usage for secure UI reactivity.

How does AlpineJS integration work with Magewire lifecycle hooks?▼

AlpineJS integration with Magewire lifecycle hooks enables clean, reusable UI patterns by registering components that coordinate between PHP backend logic and the JavaScript UI across base and frontend view areas.

Can I use Magewire addons and directives across different Magento 2 view areas?▼

Yes, Magewire addons and directives work across base and frontend view areas in Magento 2, enabling theme-agnostic frontend components with clear separation of concerns for standalone and feature-owned components.

What is the best way to structure Magewire-driven JavaScript components in Magento 2?▼

The best way to structure Magewire-driven JavaScript is through modular organization with explicit registration patterns, separating utilities, addons, Alpine components, directives, and feature bridges for clear separation of concerns.

Why do I need a CSP-compliant approach for Magewire JavaScript instead of inline scripts?▼

A CSP-compliant approach for Magewire JavaScript is needed to ensure secure, maintainable UI reactivity in Magento 2 themes without inline scripts or unsafe eval usage, preventing content security policy violations.

Related Skills

Explore More Software Engineering Skills→
magewirephpmagewirephp
262

magewire

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

Community
Advanced
InchooInchoo
18

hyva-checkout-magewire

Customize Hyvä Checkout for Magento 2 using Magewire components.

Official
Advanced
InchooInchoo
18

magewire

Create reactive PHP components for Magento 2 using Magewire.

Official
Advanced
OrcaQubitsOrcaQubits
35

magento-frontend

Develop and customize Magento 2 frontend components using layout XML, PHTML templates, and JavaScript modules.

Official
Intermediate