INTRODUCTION:
Hello, fellow developers. What’s up?, I hope you are doing fine. In this extended tutorial, we will learn how to install laravel breeze. We will discuss the walkthrough of the laravel breeze installation so you can follow it easily.
DOWNLOADING LARAVEL APPLICATION:
Now, let’s start our tutorial. First, you must download a fresh copy of the Laravel application from the internet. We will use the composer command to do that. Please copy and paste the command into your terminal and hit enter.
composer create-project laravel/laravel laravel-alpine-jsDOWNLOAD ALPINEJS INTO OUR APPLICATION – 1st Method:
We can download alpinejs in two ways. One is using the <script> tag and the other way is importing alpine js as a module.
Now, we will learn how to download alpinejs in script way. First, we must add the alpinejs cdn link into the head section of our main layout file located at views>layouts>app.blade.php. Now just copy & paste the alpinejs script tag into your layout file like below.
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
<!-- ALPINE JS -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav me-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ms-auto">
<!-- Authentication Links -->
@guest
@if (Route::has('login'))
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{__('Login') }}</a>
</li>
@endif
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }}
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
@yield('content')
</main>
</div>
</body>
</html>That all we need to do. Pretty simple right?? haha. Now let’s follow the 2nd method, which is more elegant if you are familiar with npm.
DOWNLOAD ALPINEJS INTO OUR APPLICATION – 2nd Method:
We can also download alpinejs using npm into our application. For that we will go to our project root directory and open a new terminal. Please copy & paste the code below and hit enter to install the package inside the terminal.
npm install alpinejsNext, we will open our app.js file located at resources>js>app.js. Then we need to copy & paste the following code into that file.
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()Well, our download & integration process is complete now take a look that our alpinejs is working or not. Now, open the wellcome.blade.php file and copy & paste the following code anywhere into that file.
<h1 x-data=”{ message: ‘I ❤️ Laravel & Alpine JS’ }” x-text=”message”></h1>
Well, if we did not make any mistake in earlier steps then we will see the I ❤️ Laravel & Alpine JS into our browser. If you want to learn more then checkout their documentation.
CONCLUSION:
Finished! That’s all about our tutorial. I’ve tried to teach you the most updated & tested things in this tutorial. Thank you so much for reading the whole tutorial from the beginning. If this tutorial helps you a little bit, then remember to share this post on social media. If you have questions, suggestions, or tips regarding this post, let us know via our Contact Us page.
