How to use AlpineJS with Laravel Mix

Martin Betz • July 8, 2020

This is another thing I do over and over and tend to forget how to properly do it: How can I use AlpineJS with Laravel Mix?

AlpineJS is a great lightweight library to sprinkle some interactivity into your website. I struggled a lot in the past with the question: "Do I really need to learn VueJS to get a simple dropdown account menu?" With AlpineJS, this is super simple to do.

If you want to use AlpineJS within your Laravel app, you can of course simply use the CDN version (<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js" defer></script>), but when I use other scripts as well, I prefer to have it bundled to one file to reduce requests.

Here's how to use AlpineJS with Laravel Mix:

<div x-data="{ open: false }">
    <button @click="open = true">Open Dropdown</button>

    <ul
        x-show="open"
        @click.away="open = false"
    >
        Dropdown Body
    </ul>
</div>