How to Install Alpine.js in Laravel 8

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>


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>


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


Tailwind CSS Badge 

Tailwind CSS Search

Tailwind CSS Pagination

Tailwind CSS Table 

Tailwind CSS Button

Tailwind CSS Modals

Tailwind CSS Avatar

Tailwind CSS loading Spinner

Tailwind CSS Progress Bar 

Tailwind CSS Alert Components 

Responsive Card Grid With Tailwind CSS

Tailwind CSS Dropdowns

Tailwind CSS Card

Tailwind CSS List Group

Tailwind CSS Breadcrumbs

Tailwind CSS Accordion (FAQ)

Tailwind CSS Responsive Image Gallery with Grid

Tailwind CSS Tabs