By reading through the Laravel documentation deeply, you may find some hidden, yet very useful things. These blade directives are perfectly present, how the framework makes our life easier.
@each
Most of the cases, for more complex data structures we use collections. With those are very flexible and easy to work. Even in our blade files we easily can loop trough of a collection and include or render the data. It’s very common to use the @foreach() directive to iterate over. However, there is a bit cleaner and collection specific way. Using the @each() directive, we easily can save a few lines of code.
// Foreach
@foreach ($users as $user)
@include ('users.profile')
@endforeach
With the each directive we can totally replace the approach above. The first parameter is the collection itself, the second one is the view file we want to pull in, and the third one is the local variable for each item.
// Each @each ($users, 'users.profile', 'user')
Give your project a solid foundation.
@stack – @push
It became a custom to print scripts / styles out with the @section() directive. We just define a base section for the basic scripts, and when it’s needed, we just extend it with a sub-section and yield some extra scripts. Replacing this method with named stacks is a more elegant yet cleaner solution.
// Section - sub-section
@section ('scripts')
<script src="/js/vue.js"></script>
<script src="/js/app.js"></script>
@yield ('extra-scripts')
@stop
@section ('scripts')
<script src="/js/forgotten-script.js"></script>
@stop
@yield ('scripts')
// Named stacks
@push ('scripts')
<script src="/js/vue.js"></script>
<script src="/js/app.js"></script>
@endpush
@push ('scripts')
<script src="/js/forgotten-script.js"></script>
@endpush
@stack ('scripts')
@verbatim
In many cases, when working with JavaScript frameworks, we want to print JS variables between the “{{ }}” braces what blade uses too. There is no problem for a smaller portion of data, we can attach the @ symbol as a prefix, and blade knows the rest. But when working on larger front-end, we should consider using the @verbatim directive. What this directive does, it no more just let blade know to leave this part as is. Inside this directive, we can forget the @ symbol.
// Normal way
<div class="vue-data-block">
Hello, @{{ user.name }}!
You have @{{ user.unread }} @{{ user.unread > 1 ? 'mails' : 'mail' }}.
</div>
// Using verbatim
@verbatim
<div class="vue-data-block">
Hello, {{ user.name }}!
You have {{ user.unread }} {{ user.unread > 1 ? 'mails' : 'mail' }}.
</div>
@endverbatim
It’s good to keep your code as clean as possible. In short, term saving 2-3 lines of code means nothing, but as your project goes bigger, these little techniques affect a lot.
You can read more about blade directives here.
