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!
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.
You need to add your script tag @push('scripts') in content.blade.php after @endsection