DEV Community 👩‍💻👨‍💻

Cover image for how to Install Alpine.js in Laravel 8
larainfo
larainfo

Posted on • Originally published at larainfo.com

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.

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
Enter fullscreen mode Exit fullscreen mode

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 tage add dist/alpine.min.js cdn

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
Enter fullscreen mode Exit fullscreen mode

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/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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Next, you need to install alpine js using below npm command:

npm install alpinejs
Enter fullscreen mode Exit fullscreen mode

Next, you need to import Alpine js in resources/js/app.js file

import 'alpinejs';
Enter fullscreen mode Exit fullscreen mode

Then, you need to compile laravel mix , you can run command

npm run watch 
Enter fullscreen mode Exit fullscreen mode

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 
└─────────────────────────────────────────────────────────────────────────────────────────────────────────────┴─────────
Enter fullscreen mode Exit fullscreen mode

set your head before

<script src="{{ mix('js/app.js') }}" defer></script>
Enter fullscreen mode Exit fullscreen mode

now final

<!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>
Enter fullscreen mode Exit fullscreen mode

visit my website larainfo.com

Read also

3 way to install bootstrap 5 in laravel 8
Laravel php artisan inspire command
Laravel clear cache without using artisan command

Top comments (0)

🤔 Did you know?

 
DEV has a variety of tags to help you find the content you like. Find and follow your favorite tags.