How to Use Alpine JS with Laravel?

By Hardik Savani April 16, 2024 Category : 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:

Read Also: How to Create and Use Stored Procedure in Laravel?
<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...

Tags :
Previous

Laravel Custom Forgot & Reset Password Example
Next

Angular Material Table Example| Angular Mat Table Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares