Laravel Create Custom Blade Directive Example Tutorial

Laravel Create Custom Blade Directive Example Tutorial

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
Recommended:-Laravel Try Catch

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *