Get your next remote job on LaraJobs.
Alpine.js JavaScript Laravel

Add Alpine.js to any Laravel project

Benjamin Crozat
Published on Oct 13, 2023 0 comments Edit on GitHub
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!

Wait, there's more!

Be the first to comment!

Get help or share something of value with other readers!

Great deals for enterprise developers
  • SaaSykit
    Launch your SaaS in days with a Laravel-based boilerplate.
    Get SaaSykit →
  • Summarize and talk to YouTube videos. Bypass ads, sponsors, chit-chat, and get to the point.
    Try Nobinge →
  • Monitor the health of your apps: downtimes, certificates, broken links, and more.
    20% off the first 3 months using the promo code CROZAT.
    Try Oh Dear for free
  • Keep the customers coming; monitor your Google rankings.
    30% off your first month using the promo code WELCOME30
    Try Wincher for free →
The latest community links
- / -