in this tutorial you will learn how to Install Alpine.js in Laravel 8 ? .
Alpine js is a lightweight library to and interactivity new front-end framework. Alpine js syntax is almost similar to Vue js , so if you know vue , then it is easy to learn this framework.
2 way to install Alpine.js in Laravel 8
Step 1: Create Laravel Project
Step 2: Adding Alpine.js CDN
Step 3: Adding Alpine.js using Laravel Mix
Step 1: Create Laravel Project
Installing a fresh laravel project, so head over to the terminal, type the command, and create a new laravel app.
composer create-project laravel/laravel alpine-js
Step 2: Adding Apline.js CDN
using CDN it is very easy and simple for beginners. it does not take much time you need to add simply Apline.js CND
in before tage add dist/alpine.min.js cdn
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
use defer attribute , defer attribute specifies that the script is executed when the page has finished parsing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Alpine Js</title>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
</head>
<body>
<div x-data="{ show: false }">
<button @click="show = !show">Show</button>
<h1 x-show="show">Alpine Js is working !</h1>
</div>
<hr>
<div x-data>
<button @click="alert('Alpine Js is working !')">Click</button>
</div>
</body>
</html>
Step 3: Adding Alpine.js using Laravel Mix
In Laravel Mixing Alpine.js Install is very easy. you need to install first node npm if you do not have node npm package then install first other wise Laravel mix not working .
npm install
Next, you need to install alpine js using below npm command:
npm install alpinejs
Next, you need to import Alpine js in resources/js/app.js file
import 'alpinejs';
Then, you need to compile laravel mix , you can run command
npm run watch
check you Compiled Successfully
Laravel Mix v6.0.19
✔ Compiled Successfully in 1242ms
┌─────────────────────────────────────────────────────────────────────────────────────────────────────────────┬─────────┐
│ File │ Size │
├─────────────────────────────────────────────────────────────────────────────────────────────────────────────┼─────────┤
│ /js/app.js │ 675 KiB │
│ css/app.css │ 1 bytes │
└─────────────────────────────────────────────────────────────────────────────────────────────────────────────┴─────────
set your head before
<script src="{{ mix('js/app.js') }}" defer></script>
now final
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Alpine Js</title>
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
<div x-data="{ show: false }">
<button @click="show = !show">Show</button>
<h1 x-show="show">Alpine Js is working !</h1>
</div>
<hr>
<div x-data>
<button @click="alert('Alpine Js is working !')">Click</button>
</div>
</body>
</html>
visit my website larainfo.com
Read also
3 way to install bootstrap 5 in laravel 8
Laravel php artisan inspire command
Laravel clear cache without using artisan command
Top comments (0)