On This Page
v 1.0.0
Last updated: 16/03/2026
Alpine.js Enqueue
Adds Alpine.js on the front end and/or admin for small reactive UI without a heavy framework.
Overview
Alpine.js Enqueue loads the Alpine.js framework on your WordPress site. Choose to load it on the frontend, admin, or both. Alpine.js is a lightweight JavaScript framework for reactive components—dropdowns, tabs, modals, and dynamic content—without Vue or React. Load from CDN or a local file. Optional defer/async attributes. Optional initialization code (Alpine.data, Alpine.store, etc.) that runs after Alpine loads. No build step required.
Who is this for?
Developers and site owners who want to add Alpine.js for reactive UI components without a build process, or those building lightweight interactive elements.
Features
Load on Frontend and/or Admin
Enable Alpine.js on the frontend, admin, or both. Toggle independently.
CDN or Local
Load from jsDelivr CDN (default) or specify a local file path. Version selectable (default 3.13.5).
Defer and Async
Add defer (default) or async to the script tag for better loading.
Initialization Code
Optional JavaScript that runs after Alpine loads. Use for Alpine.data(), Alpine.store(), Alpine.plugin(), etc. Injected in wp_footer/admin_footer.
How It Works
1
Enable the Module
Go to WP PowerSuite, find "Alpine.js Enqueue," and click the Enable button.
2
Configure Settings
Open the module settings. Enable "Load on frontend" and/or "Load on admin." Choose CDN or local source. Optionally add initialization code. Save.
3
Use Alpine
Alpine.js is available on the enabled context(s). Use x-data, x-show, x-on, etc. in your HTML.
Performance Note
Alpine.js is ~15KB gzipped. CDN loading is fast. Defer keeps it non-blocking. No build step—no compilation overhead.
Installation & Activation
1
Install WP PowerSuite
Make sure the WP PowerSuite plugin is installed and activated on your site.
2
Enable the Module
Go to the WP PowerSuite menu, find "Alpine.js Enqueue" in the module list, and click the Enable button.
3
Configure Settings
Enable frontend and/or admin. Set source and version. Add init code if needed. Save.
Requirements
PHP 8.1 or higher
WordPress 6.0 or higher
Permission to manage options (Administrator)
Use Cases
- AlpineIntegrationAdd dropdowns, tabs, or modals without jQuery UI
- ReactiveComponentsBuild reactive components in theme templates
- AdminEnhancementUse Alpine in admin custom pages
- LightweightInteractivityLightweight alternative to Vue/React for simple interactions
Frequently Asked Questions
Does this conflict with other Alpine loads?
Use only one source. If your theme or another plugin loads Alpine, disable this module to avoid duplicate loading.
Can I use Alpine.store?
Yes. Add initialization code that calls Alpine.store(‘name’, { … }). It runs after Alpine loads.
Troubleshooting
- Alpine not workingEnsure you enabled frontend and/or admin and saved. Check the browser console for errors. Verify the CDN URL is accessible. If using local file, ensure the path is correct and the file exists.
