javascriptphplaravellaravel-8laravel-components

Including Javascript codes with @stack not working

I'm working with Laravel 8 and I have a master.blade.php goes like this:

<!DOCTYPE html>
<html>
   <head>
      <!-- including scripts and stylesheets -->
   </head>
   <body>
      @yield('content')

      <script src="/plugins/jquery/jquery.min.js"></script>
      @stack('scripts')
   </body>
</html>

Then at content.blade.php, I added this as my dynamic content:

@extends('admin.master')

@section('content')
   {{ $title }}
   ...
   {{ $slot }}
@endsection

After that I have created some new file and used the components like this:

@component('admin.layouts.content' , ['title' => 'example file'])
   @slot('breadcrumb')
        <li class="breadcrumb-item active">Example File</li>
   @endslot
   ...
@endcomponent

@push('scripts')
   <script>
   console.log(1); // to check if the js codes can be run on page
   </script>
@endpush

But the problem is that @push('scripts') not working at all! Meaning that this way of including Javascript codes is wrong.

So how can I properly include them in my example page properly?

Note that I don't want to include js codes in content.blade.php because it loads in every single page!

Solution

  • You can try to swap the order of @push and @component

    @push('scripts')
   <script>
   console.log(1); // to check if the js codes can be run on page
   </script>
@endpush

@component('admin.layouts.content' , ['title' => 'example file'])
   @slot('breadcrumb')
        <li class="breadcrumb-item active">Example File</li>
   @endslot
   ...
@endcomponent

    I guess it's got something with how blade files are parsed and compiled. So when @component | <x-component> comes before @push, what probably happens is that the component gets rendered by the blade compiler engine and then there's no placeholder for the @push directive to merge contents on the stack.

    Faced a similar issue once and learnt that when using components the @push should come before the @component | <x-component> - order is important when using stacks with component.