How to Use Alpine JS with Laravel?
Hello all! In this article, we will talk about how to use alpine js in laravel. if you want to see example of laravel alpine js example then you are a right place. you'll learn laravel install alpine js. In this article, we will implement a laravel 8 install alpine js. Here, Creating a basic example of laravel install alpine.
in this post, i will give two way to use alpine js with laravel. one we will use cdn js for alpine and second example with laravel mix with alpine js. you can easily use with laravel 6, laravel 7, laravel 8, laravel 9, laravel 10 and laravel 11 version.
Let's see both example:
Laravel Alpine js using CDN
you can use direct with blade file as like bellow example:
<!DOCTYPE html>
<html>
<head>
<title>Alpine JS @click Event Example - ItSolutionStuff.com</title>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
</head>
<body>
<div x-data="{ open: false }">
<button @click="open = !open">Click to List Categories</button>
<ul x-show="open">
<li>PHP</li>
<li>Laravel</li>
<li>Vue</li>
<li>React</li>
</ul>
</div>
</body>
</html>
Laravel Alpine js with mix
first you need to install alpine js using bellow npm command:
npm install alpinejs
import alpine js on app.js file:
resources/js/app.js
import 'alpinejs';
now you can run dev command:
npm run dev
you can use app.js file as you need on any blade file:
<script src="{{ asset('js/app.js') }}" defer></script>
simple example code:
<div x-data="{ open: false }">
<button @click="open = !open">Click to List Categories</button>
<ul x-show="open">
<li>PHP</li>
<li>Laravel</li>
<li>Vue</li>
<li>React</li>
</ul>
</div>
i hope it can help you...
