Share this:

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-js

Step 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 alpinejs

Next, 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 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 │
└─────────────────────────────────────────────────────────────────────────────────────────────────────────────┴─────────

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

Thank you for taking the time to read the tutorial. I hope this tutorial on how to install Alpine.js in Laravel 9 was useful.

Share this:

Categorized in:

Laravel Tutorials

Tagged in:

, , ,