22 February, 2021

Laravel Create Custom Blade Directive

           ,      No comments   

 Laravel 8 create custom blade directive example. In this tutorial, you will learn how to create custom blade directive in laravel 6,7,8 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 app.

How to Create Custom Blade Directive in Laravel?

  • 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?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); ?>";
        });
    }
}
Recommended:- Laravel 8 Livewire Load More OnScroll Tutorial Example

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:

1
2
3
4
5
6
7
8
9
10
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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>
Recommended:- Laravel 8 Livewire CRUD with Jetstream Tutorial

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 8 app. So open your browser and hit the following URL into your browser:

localhost:8000/directive
resources by: tutsmake . com

Meta

Popular Posts

Categories

Social Media Links

Blog Archive

Laravel News

Loading...