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 — Dastan
– Dastan, Commented Jun 17, 2022 at 9:42

Donkarnash · Accepted Answer · 2022-06-15 20:09:15Z

1

+50

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.

edited Jun 15, 2022 at 20:09

answered Jun 15, 2022 at 11:33

Donkarnash

12.9k5 gold badges30 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Peter Amo Over a year ago

Would you check this related question plz: stackoverflow.com/questions/72675459/…

Collectives™ on Stack Overflow

Including Javascript codes with @stack not working

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related