10 Blade directives that you should knowDaanBlockedUnblockFollowFollowingMay 16Out of the box Laravel comes with Blade, a powerful templating engine that makes writing your views in Laravel very easy.
Most Laravel developers know a lot about the framework, but their Blade knowledge is lacking sometimes.
In this article I want to share ten Blade directives with you that are very useful and could be used to make your life as a developer easier.
@jsonInstead of manually callingjson_encode($array) in your views you may use the json directive:@json($array)If you are using Vue.
js for your front end the json directive comes in very handy when seeding Vue-components from your Blade template.
<blog-overview-component :blogs='@json($blogs)'></blog-overview-component> @issetA common suboptimal way to check if a variable is set in Blade is by using the if directive.
@if(isset($blog)) // $blog is defined and is not null@endifThis could be done via a shortcut, which looks much cleaner and is more readable.
@isset($blog) // $blog is defined and is not null@endissetThe same thing could be done with the empty directive.
@if (empty($blogs)) // $blogs is empty@endif// Could also be written as:@empty($blogs) // $blogs is empty@endempty@guest and @authBlade contains authentication directives that could be used to determine if the current user is authenticated or not.
@guest // The user is not authenticated.
@endguest@auth // The user is authenticated.
@endauth@forelseThe forelse directive is a special kind of loop.
It is a foreach directive combined with the empty directive.
Take a look at the following example:@if ($blogs->count()) @foreach ($blogs as $blog) <li>{{ $blog->title }}</li> @endforeach@else <p>There are no blogs.
</p>@endifThe example above could be refactored into a much cleaner way to solve this problem.
This could be done by using the forelse directive.
@forelse ($blogs as $blog) <li>{{ $blog->title }}</li>@empty <p>There are no blogs.
</p>@endforelseNote the difference in readability between both examples.
@continue and @breakBlade has the continue and break directives that make it possible to continue and break inside a loop.
@foreach ($blogs as $blog) @if (!$blog->is_validated) @continue @endif <li>{{ $blog->title }}</li> @if ($blog->is_last) @break @endif@endforeachWe can optimize the example above by including the condition in the continue and break directive, so that it could be refactored into one line of code:@foreach ($blogs as $blog) @continue(!$blog->is_validated) <li>{{ $blog->title }}</li> @break($blog->is_last)@endforeachThis looks much cleaner, right?@eachThe each directive combines a loop and includes of views in one directive.
@each('blog.
item', $blogs, 'blog', 'blog.
no-items')The first argument is the view partial for rendering each element in the array or collection.
The second argument is the array or collection that you want to loop through.
The third argument is the name of the current element.
The last argument, which is optional, is the view partial that will be rendered if the array or collection is empty.
@includeWhenThe include directive allows you to include a Blade view from within another view.
A lot of times a check is added to determine if the view should be included.
@if($blog->likes->count()) @include('view.
name', ['blog' => $blog])@endifBy using the includeWhen directive this could be done in one line of code:@includeWhen($blog->likes->count(), 'view.
name', ['blog' => $blog])@stack and @pushThe stack directive allows you to render content somewhere else in another view or layout.
By using the push directive you can add content to a stack.
This is often used to render Javascript and CSS includes.
For example, on the blog detail view we could push a Javscript file that needs to be included.
We can do this by pushing the HTML to the scripts stack.
@push('scripts') <script src="/blog-detail.
js"></script>@endpushIn the <head> tag of the layout we could render the complete stack contents by using the stack directive and passing the name of the stack, scripts in this case.
<head> <!– Your head content –> @stack('scripts')</head>That’s it!Now that you have read this article I hope that you gained some new insights on Blade directives that you could use.
If this article made you start refactoring your views; happy refactoring!Make sure to check out my other posts aswell, a lot of my content is about Laravel.
Please feel free to leave a comment if you have any feedback, questions or want me to write about another Laravel related topic.
.