Including Javascript codes with @stack not working

Question

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!

That is not how you create a component anymore in laravel 8 [see here](https://laravel.com/docs/8.x/blade#rendering-components) — Dastan, Jun 17 '22 at 09:42

Donkarnash · Accepted Answer · 2022-06-15T20:09:15.453

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.

Would you check this related question plz: https://stackoverflow.com/questions/72675459/pushing-javascript-codes-at-blade-does-not-work-out — japose7523, Jun 19 '22 at 10:19

Including Javascript codes with @stack not working

1 Answers1