This Tutorial will teach you how to install Alpine.js in Laravel 9.
Alpine.js is a rugged, minimal framework for composing JavaScript behavior in your markup. That’s right, in your markup!
Read also : How to Install Bootstrap in Laravel 9?
Alpine.js can be installed in two ways in Laravel 9.
Way 1 :
- 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 new Laravel project, so open a terminal, type the command, and create a new Laravel app.
composer create-project laravel/laravel alpine-jsStep 2: Adding Apline.js CDN
This is by far the simplest way to get started with Alpine. Include the following <script> tag in the head of your HTML page.
<html>
<head>
...
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></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>Don’t forget the “defer” attribute in the <script> tag.
Notice the @3.x.x in the provided CDN link. This will pull the latest version of Alpine version 3. For stability in production, it’s recommended that you hardcode the latest version in the CDN link.
<script defer src="https://unpkg.com/alpinejs@3.10.2/dist/cdn.min.js"></script>That’s it! Alpine is now available for use inside your page.
Step 3: Adding Alpine.js using Laravel Mix
Alpine.js installation in Laravel is very simple. You must first install node npm. If you do not have the node npm package, install it first; otherwise, the Laravel mix will not work.
npm install Next, run the following npm command to install alpine js:
npm install alpinejsNext, you need to import Alpine js in resources/js/app.js file.
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 devcheck you Compiled Successfully.
Laravel Mix v6.0.19
✔ Compiled Successfully in 1242ms
┌─────────────────────────────────────────────────────────────────────────────────────────────────────────────┬─────────┐
│ File │ Size │
├─────────────────────────────────────────────────────────────────────────────────────────────────────────────┼─────────┤
│ /js/app.js │ 675 KiB │
│ css/app.css │ 1 bytes │
└─────────────────────────────────────────────────────────────────────────────────────────────────────────────┴─────────add script to the head section.
<script src="{{ mix('js/app.js') }}" defer></script>or
<script src="{{ asset('js/app.js') }}" defer></script>now, the blade file look like this
<!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>Way 2 :
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-nameInstall breeze
You need to install first breeze package
composer require laravel/breeze --devThen, install breeze ui
php artisan breeze:installAfter, you need to install dependencies
npm install && npm run dev2.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-nameinstall Jetstream Package
composer require laravel/jetstreamNext, install livewire chose one of for your requirements
php artisan jetstream:install livewire
php artisan jetstream:install livewire --teamsFinalizing The Installation
npm install
npm run dev
php artisan migrateThank you for taking the time to read the tutorial. I hope this tutorial on how to install Alpine.js in Laravel 9 was useful.
10 thoughts on “How to Install Alpine.js in Laravel 9”