DEV Community

Martin Betz
Martin Betz

Posted on • Originally published at on

How to use AlpineJS with Laravel Mix

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="" 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>

        @click.away="open = false"
        Dropdown Body

Top comments (6)

dendihandian profile image
Dendi Handian

anyone know how to add alpine persist plugin in laravel mix? ref:

I'm having this error: Alpine Error: "ReferenceError: $persist is not defined"

maximusblade profile image
Peter Sserwanga

@dendibaev did you ever get this fixed? how did you resolve?

dendihandian profile image
Dendi Handian • Edited

I'm not sure but you can look at this file in my project

Sloan, the sloth mascot
Comment deleted
dendihandian profile image
Dendi Handian

if you use Laravel Mix and build it with production mode, it less than 79Kb in size.

flads profile image
Fábio Souza

Thank's, straight to the point!