Get your next remote job on LaraJobs.

Add Alpine.js to any Laravel project

Table of contents:

Add Alpine.js to any Laravel project

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!

Benjamin Crozat

Written by Benjamin Crozat

Indie hacker, blogger, and AI enthusiast building things with the TALL stack. 🔥

Follow me on:

Recommended articles

Alpine.js: a lightweight framework for productive developers Alpine.js: a lightweight framework for productive developers

Smaller and even easier than Vue.js, setting up Alpine.js is as easy as copying and pasting a code snippet.

Published on Jan 26, 2023

Add Vue.js to any Laravel project Add Vue.js to any Laravel project

Let me walk you through adding Vue.js to your Laravel project and be done with it in 5 minutes.

Published on Oct 13, 2023

Add Tailwind CSS to any Laravel project Add Tailwind CSS to any Laravel project

See how easy it is to add Tailwind CSS to any Laravel project and start building an amazing user interface.

Published on Oct 5, 2023

Bun vs. NPM, Yarn, pnpm, and others Bun vs. NPM, Yarn, pnpm, and others

Learn why Bun is a great and can be used as a package manager, replacing NPM, Yarn, pnpm, and others.

Published on Sep 11, 2023

Gold sponsors New

  • Wire Elements
    Beautiful handcrafted Livewire components.
    Check site
Your business here

Partners

If you buy from one of my partners below, I will be compensated at no cost to you. These are services I use or used, and 100% stand behind.

  • Scalable and reliable VPS hosting.
    Bonus: $200 of free credits
    Check site
  • The Google Analytics alternative without compromise.
    Free trial: 30 days
    Bonus: $10 off your first invoice
    Check site
  • Flare
    Track PHP and JavaScript errors in one place.
    Free trial: 10 days
    Check site
  • Keep track of your Google rankings.
    Free trial: 7 days
    Promo code: WELCOME30
    Check site
- / -