What is Alpine JS?
Alpine.js is a relatively new front-end framework that promises the reactive and declarative nature of big frameworks like Vue.js or React.js without having to run npm, compile scripts, configure webpack all in a nice 7.37kb CDN hosted file. You get to keep your DOM and sprinkle in behavior as you see fit. Think of it like Tailwind for JavaScript.
According to the Alpine.js docs , its syntax is almost entirely borrowed from Vue.js (and by extension Angular.js ), so if you already know either of these frameworks there is a very low learning curve to getting started.
In this blog, We will learn how to use alpine.js In Laravel with two examples.
- Alpine.js CDN
- Laravel Mix
Alpine JS Using CDN
You can use directly with blade file as below example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to use Alpine.js with Laravel - TechvBlogs</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.3.0/alpine-ie11.min.js" integrity="sha512-Atu8sttM7mNNMon28+GHxLdz4Xo2APm1WVHwiLW9gW4bmHpHc/E2IbXrj98SmefTmbqbUTOztKl5PDPiu0LD/A==" crossorigin="anonymous"></script>
</head>
<body>
<div x-data="{ show: false }">
<button @click="show = !show">Show</button>
<h1 x-show="show">Hello Alpine.js</h1>
</div>
</body>
</html>
Read Also: How to use Tailwind CSS with Laravel
Alpine JS with Laravel Mix
first, you need to install alpine js using below npm command:
npm install alpinejs
Import alpinejs in resources/js/app.jsfile
import 'alpinejs';
Now, you can run dev command
npm run dev
you can use the app.jsfile as you need on any blade file
<script src="{{ mix('js/app.js') }}" defer></script>
<div x-data="{ show: false }">
<button @click="show = !show">Show</button>
<h1 x-show="show">Hello Alpine.js</h1>
</div>
Thank you for reading this blog.
Read Also: Firebase Push Notification Laravel Tutorial
If you have any queries or doubts about this topic please feel free to contact us. We will try to reach you.
