
Add Alpine.js to any Laravel project
Introduction
Alpine.js is a fantastic way to start adding reactivity to your user interface. I wrote about this minimalist framework if you’re not familiar with it yet.
Today, we’ll learn how to add Alpine.js into an existing Laravel project. Of course, this will work on new projects too. Let’s dive in!
Use Alpine.js via a CDN
Alpine.js is such a simple framework that it can be dropped into any web page using the CDN of your choice.
<!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 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> <!-- Your content. --> </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 latest version of the framework and plugin. For production use, it’s recommended to specify a fixed version number instead of using the @3.x.x
syntax to ensure consistency.
Install Alpine.js in Laravel
If you’d like to control the number of HTTP requests on your page and don’t mind using build tools, you might prefer to bundle the framework into your JavaScript.
npm install 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' // If you want Alpine's instance to be available globally. window.Alpine = Alpine Alpine.start()
That’s it. Simple, right?
To use plugins, first install one. For example, let’s add the Intersect plugin:
npm install @alpinejs/intersect
Then, tell Alpine to use the plugin:
import Alpine from 'alpinejs' import Intersect from '@alpinejs/intersect' window.Alpine = Alpine Alpine.plugin(Intersect) Alpine.start()
Add minimal Alpine.js code
We’re almost there!
Include your JavaScript using the @vite
directive and add this basic component to test Alpine.js:
<!DOCTYPE html> <html> <head> <!-- Other head elements. --> @vite(['resources/js/app.js']) </head> <body> <div x-data="{ count: 0 }"> <button @click="count++">Add</button> <span x-text="count"></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!
npm run dev
Done! Now, go build something amazing with Alpine.js and Laravel!
Conclusion
Adding Alpine.js to your Laravel project is a straightforward process, whether you choose to use a CDN or bundle it with your assets. This lightweight framework can significantly enhance the interactivity of your Laravel applications without the complexity of larger JavaScript frameworks.
Remember to explore Alpine.js’s documentation for more advanced features and best practices as you integrate it into your Laravel projects. Happy coding!
Did you like this article? Then, keep learning:
- Another useful common Laravel error fix guide to improve your debugging skills
- Quickly fix common Laravel errors you might encounter during development
- Deepen your Alpine.js knowledge with a comprehensive overview of its features
- Improve your Laravel workflow by using the Bun package manager for frontend assets
- Learn to integrate chat functionality in Laravel using Livewire v3 persistently
- Master error handling in Laravel's HTTP client to write robust API calls
- Understand how Laravel works internally for better overall framework mastery
- Boost your Laravel frontend with Vue.js for richer interactivity
- Take your Livewire components to the next level with persistent navigation
- Learn how to add Tailwind CSS to any Laravel project for improved UI design
3 comments
hi i’m trying to use alpine in js files in public but in blade files there not working i tryed importing alpine in app.js and js in public but it’s not working it only works when i write it in the app.js
Make sure you use the x-data attribute. You can put it on the body tag for example. Even if it’s empty:
<body x-data>
i am aware of that my problem is that i can only write alpine data in app.js i cant write alpine data in custom scripts in public and then import them in my blade it doesn’t works