Alpine.js Enqueue

Enqueue the Alpine.js JavaScript framework on your WordPress frontend and/or admin dashboard to enable reactive components and dynamic interactions without complex build tools or heavy frameworks.

Use Cases#

• Add interactive dropdowns, modals, and tabs without jQuery
• Create reactive form validation and dynamic UI components
• Build lightweight toggles, accordions, and carousels
• Enable modern JavaScript interactivity for theme developers

What is Alpine.js?#

Alpine.js is a lightweight JavaScript framework (~15kb) that provides reactive and declarative features similar to Vue.js but with a much smaller footprint. It’s perfect for adding interactivity to server-rendered pages without the complexity of a full SPA framework.

Think of it as “jQuery for the modern web” - you write directives directly in your HTML:

<div x-data="{ open: false }">
    <button @click="open = !open">Toggle</button>
    <div x-show="open">
        Content shown when toggled
    </div>
</div>

How It Works#

1. Enable the module in Switchboard
2. Choose where to load Alpine.js (frontend, admin, or both)
3. Select your preferred Alpine.js version
4. Alpine.js is automatically loaded via CDN

Settings#

Version Differences#

Alpine 3.x (Recommended)#

• Modern syntax with improved performance
• Better TypeScript support
• New features like x-id, x-teleport, x-modelable
• Active development and support

Alpine 2.x (Legacy)#

• Use only if you have existing code written for Alpine 2
• Some syntax differences (e.g., $el instead of $refs)
• Still works but no longer actively developed

Common Alpine.js Patterns#

Dropdown Menu#

<div x-data="{ open: false }">
    <button @click="open = !open">
        Menu
    </button>
    <ul x-show="open" @click.away="open = false">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
    </ul>
</div>

Accordion#

<div x-data="{ active: null }">
    <div>
        <button @click="active = active === 1 ? null : 1">
            Section 1
        </button>
        <div x-show="active === 1">
            Content for section 1
        </div>
    </div>
    <div>
        <button @click="active = active === 2 ? null : 2">
            Section 2
        </button>
        <div x-show="active === 2">
            Content for section 2
        </div>
    </div>
</div>

Form Validation#

<form x-data="{ email: '', valid: false }" @submit.prevent="valid && submitForm()">
    <input
        type="email"
        x-model="email"
        @input="valid = email.includes('@')"
    >
    <button :disabled="!valid">Submit</button>
</form>

Performance Considerations#

Defer Loading#

Enable “Defer Loading” to add the defer attribute to the script tag. This allows the browser to continue parsing HTML while downloading Alpine.js, improving initial page load time.

CDN Loading#

Alpine.js is loaded from jsDelivr CDN, which provides:

• Global CDN distribution for fast loading worldwide
• Automatic version updates within major version (3.x.x)
• No local file management required

Combining with Other JavaScript#

Alpine.js works alongside jQuery and other JavaScript libraries. However, avoid using multiple reactive frameworks (like Vue or React) on the same page as they may conflict.

FAQ#