Laravel create custom blade directive; In this tutorial, you will learn how to create custom blade directive in laravel 6,7,8,9,10 app.
This tutorial will help you create your own @var, @if, @case directive that will help you to avoid write so many time same code and you can reuse it easily.
Now, you will learn in simple and easy way of creating custom blade directives in laravel and you can easily use with laravel 6, laravel 7 and laravel 8, laravel 9, 10 app.
How to Create Custom Blade Directive in Laravel?
Follow the following steps to create custom blade directive in laravel apps:
- Step 1: Create Custom Blade Directive
- Step 2: Create Route
- Step 3: Create Blade File
- Step 4: Run Development Server
Step 1: Create Custom Blade Directive
In this step, you need to declare custom blade directive in app service provide file.
So, Navigate to app/Providers/ directory and open AppServiceProvider.php file. Then add the following code into your AppServiceProvider.php file:
<?php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Illuminate\Pagination\Paginator;
use Blade;
class AppServiceProvider extends ServiceProvider
{
/**
* Register any application services.
*
* @return void
*/
public function register()
{
}
/**
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
Paginator::useBootstrap();
Blade::directive('nl2br', function ($string) {
return "<?php echo nl2br($string); ?>";
});
}
}
Step 2: Create Route
In this step, Navigate to routes folder and open web.php. Then add the following routes into your web.php file:
Route::get('directive', function () {
$body = '';
if(request()->filled('body')){
$body = request()->body;
}
return view('directive', compact('body'));
});
Step 3: Create Blade File
In this step, navigate to resources/views/livewire folder and create one blade view files that name directive.blade.php file. Then add the following code into your directive.blade.php file:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Laravel - How to create directive - Tutsmake.com</h1>
<form>
<strong>Enter Something:</strong>
<textarea name="body" class="form-control" style="height: 200px"></textarea>
<button type="submit" class="btn btn-success">Submit</button>
</form>
<p>Body:</p>
<p>@nl2br($body)</p>
</div>
</body>
</html>
Step 4: Run Development Server
Finally, you need to run the following PHP artisan serve command to start your laravel livewire upload file app:
php artisan serve
If you want to run the project diffrent port so use this below command
php artisan serve --port=8080
Now, you are ready to test custom blade directive in laravel app. So open your browser and hit the following URL into your browser:
localhost:8000/directive
