1 contributor Edit on GitHub Alpine.js JavaScript Laravel

Add Alpine.js to any Laravel project

Table of contents:

Introduction to Alpine.js in Laravel
Use Alpine.js via a CDN
Install Alpine.js in Laravel via NPM, Yarn, pnpm, or Bun
Set up Alpine.js
Add minimal Alpine.js code
Compile your assets and check your browser

Introduction to Alpine.js in Laravel

Alpine.js is a great way to start adding reactivity to your user interface. I wrote about this minimalist framework if you are not familiar with it yet.

Today, we will learn how to add Alpine.js into an existing Laravel project. Of course, this will even work on new projects. Let’s dive in!

Use Alpine.js via a CDN

Alpine.js is such a simple framework that it can just be dropped in any web page using the CDN of your choice.

<!DOCTYPE html>
<html>
    <head>
        …
 
        <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    </head>
    <body>
        …
    </body>
</html>

That’s it. And you can even add plugins that way:

<!DOCTYPE html>
<html>
    <head>
        <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/intersect@3.x.x/dist/cdn.min.js"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    </head>
    <body>
        …
    </body>
</html>

You could already stop reading this article. If you are missing the good old days when everybody used jQuery and build tools were only for hipsters, you should be happy!

Pro tip: the URLs in this example redirect to the last version of the framework and plugin. Replace them by the target URL instead.

Install Alpine.js in Laravel via NPM, Yarn, pnpm, or Bun

If you’d like to control the amount of HTTP requests on your page and don’t fear compilation processes, you might instead bundle the framework into your JavaScript.

Whatever package manager you use (NPM, Yarn, pnpm, or Bun), use the following command.

If you use NPM:

npm install alpinejs

If you use Yarn:

yarn add alpinejs

If you use Bun:

bun add alpinejs

Set up Alpine.js

Now, we must import Alpine and create an instance of the framework.

In resources/js/app.js, make the following modifications:

import Alpine from 'alpinejs'
 
Alpine.start()
 
// If you want Alpine's instance to be available everywhere.
window.Alpine = Alpine

That’s it. Simple, right?

Oh, before I forget, here’s how to use plugins. First, install one.

If you use NPM:

npm install @alpinejs/intersect

If you use Yarn:

yarn add @alpinejs/intersect

If you use Bun:

bun add @alpinejs/intersect

Then, tell Alpine to use the Intersect plugin:

import Alpine from 'alpinejs'
import Intersect from '@alpinejs/intersect'
 
Alpine.plugin(Intersect)
 
Alpine.start()
 
window.Alpine = Alpine

Add minimal Alpine.js code

We’re almost there!

Include your JavaScript using the @vite directive and copy and paste this basic component:

<!DOCTYPE html>
<html>
    <head>
        …
 
        @vite(['resources/js/app.js'])
    </head>
    <body>
        <div x-data="{ count: 0 }">
            <button @click="count++">Add</button>
            <span x-text="count">0</span>
        </div>
    </body>
</html>

Yes, this is an old-fashioned counter to demonstrate that the framework is working.

I know, very original, right? 😅

Compile your assets and check your browser

If you did everything correctly, Alpine.js should now be up and running. Compile your assets and check your browser!

If you use NPM:

npm run dev

If you use Yarn:

yarn dev

If you use Bun:

bun run dev

Done! Now, go build something amazing!

Add Alpine.js to any Laravel project

Introduction to Alpine.js in Laravel

Use Alpine.js via a CDN

Install Alpine.js in Laravel via NPM, Yarn, pnpm, or Bun

Set up Alpine.js

Add minimal Alpine.js code

Compile your assets and check your browser

Recommended articles

Gold sponsors New

Partners