how to Install Alpine.js in Laravel 8
Tags: laravel, javascript, alpinejs, webdev
Published: 2021-05-27 08:28:19

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.

```php
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 
```php
<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.

```php
<!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 .

```php
npm install
```
Next, you need to install alpine js using below npm command:
```php
npm install alpinejs
```
Next, you need to import  Alpine js in resources/js/app.js file
```php
import 'alpinejs';
```
Then, you need to compile laravel mix , you can run command
```php
npm run watch 
```
check you Compiled Successfully

```php
  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 
```php
<script src="{{ mix('js/app.js') }}" defer></script>
```
now final

```php
<!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](https://larainfo.com/)
### Read also 
[3 way to install bootstrap 5 in laravel 8](https://larainfo.com/blogs/3-way-to-install-bootstrap-5-in-laravel-8)
[Laravel php artisan inspire command](https://larainfo.com/blogs/laravel-php-artisan-inspire-command-that-can-inspire-you)
[Laravel clear cache without using artisan command](https://larainfo.com/blogs/laravel-clear-cache-without-artisan)