How To Use Alpine JS With Laravel

How to Use Alpine JS with Laravel

In this post we will give you information about How to Use Alpine JS with Laravel. Hear we will give you detail about How to Use Alpine JS with Laravel And how to use it also give you demo for it if it is necessary.

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 - onlinecode</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>

Also see: 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.

Also see: 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.

Hope this code and post will helped you for implement How to Use Alpine JS with Laravel. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github