Manage Your VPS Server without Touching Command Line

Register now and Redeem Credits

Redeem Code: TECHVBLOGS

How to Use Alpine JS with Laravel

  Suresh Ramani   Laravel   1 month ago
How to Use Alpine JS with Laravel - TechvBlogs

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.

  1. Alpine.js CDN
  2. 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.


Suresh Ramani - Author - TechvBlogs
Suresh Ramani
Laravel & Vue.js Developer
Advertise Here