Member-only story
How to Integrate Alpine.js into Your Laravel Project
3 min readNov 4, 2024
Alpine.js is a great choice when you want to introduce reactive functionality to your user interface with minimal overhead. In this guide, we’ll walk through how to add Alpine.js to an existing Laravel project — though the steps apply equally well to new projects. Let’s jump right in!
Adding Alpine.js via a CDN
One of the simplest ways to start using Alpine.js is by loading it directly from a CDN. Since Alpine.js is a minimalistic framework, you can easily drop it into any web page by including the following in your HTML:
<!DOCTYPE html>
<html>
<head>
<!-- ... other head elements ... -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<!-- ... your content ... -->
</body>
</html>That’s all you need to get started. You can also add Alpine.js plugins the same 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>
<!-- ... your content ... -->
</body>
</html>
