How to use AlpineJS with Laravel Mix

#tech #laravel

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:

npm install alpinejs
(in resources/js/app.js) Add the line import 'alpinejs';
(in webpack.mix.js) Make sure mix.js('resources/js/app.js', 'public/js') is there
npm run dev (or production or watch instead of dev)
(in the Blade file where you want to use Alpine) Insert <script src="{{ asset('js/app.js') }}" defer></script> in the <head> section
Use Alpine as described in the docs, such as the following account dropdown

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

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