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.
Read also : 3 Ways to Set up Tall Stack in Laravel 8
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 </head> tage add dist/alpine.min.js cdn
Alpine js 2
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
Alpine js 3
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></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/[email protected]/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>
alpinejs
How to install Inertia js in Laravel 8 with Vue 3
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
Alpine js 2
import 'alpinejs';
Alpine js 3
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()
Then, you need to compile laravel mix , you can run command
npm run watch
or
npm run dev
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>
or
<script src="{{ asset('js/app.js') }}" defer></script>
add in your blade file
<!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>
alpinejs working
Other way to install Alpine js 3 in laravel 8
1.Install breeze
laravel breeze package come with tailwind css and alpine js . you can also install start project with breeze and latest version of alpine js 3
Create a New Laravel App
composer create-project --prefer-dist laravel/laravel project-name
Install breeze
You need to install first breeze package
composer require laravel/breeze --dev
Then, install breeze ui
php artisan breeze:install
After, you need to install dependencies
npm install && npm run dev
2.install Jetstream
jetstream also come with alpine js 3 and tailwind css
Create a New Laravel App
composer create-project --prefer-dist laravel/laravel project-name
install Jetstream Package
composer require laravel/jetstream
Next, install livewire chose one of for your requirements
php artisan jetstream:install livewire
php artisan jetstream:install livewire --teams
Finalizing The Installation
npm install
npm run dev
php artisan migrate
Tailwind CSS Components
Responsive Card Grid With Tailwind CSS
Tailwind CSS Responsive Image Gallery with Grid
