I have an app with two main layouts auth and app. The auth layouts is for my authentication views whiles the app layouts is for the main application views with sidebars and headers . But they both share a the same css and js blocks. So i decided to create two components (head.blade.php and scripts.blade.php) in a sub directory "includes" in the resources/views/components directory. This is the content of my includes/head.blade.php file
@props(['title' => $title ?? ''])
<head>
<meta charset="utf-8" />
<title> {{ucfirst(config('app.name'))}} - {{ucfirst($title)}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
<meta content="Themesbrand" name="author" />
<!-- App favicon -->
<link rel="shortcut icon" href="{{asset('assets/images/favicon.ico')}}">
<!-- Bootstrap Css -->
<link href="{{asset('assets/css/bootstrap.min.css')}}" id="bootstrap-style" rel="stylesheet" type="text/css" />
<!-- Icons Css -->
<link href="{{asset('assets/css/icons.min.css')}}" rel="stylesheet" type="text/css" />
<!-- App Css-->
<link href="{{asset('assets/css/app.min.css')}}" id="app-style" rel="stylesheet" type="text/css" />
<!-- Custom Css-->
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<!-- Page Css-->
@stack('page-css')
</head>
And this is the content of my includes/scripts.blade.php file.
<!-- JAVASCRIPT -->
<script src="{{asset('assets/libs/jquery/jquery.min.js')}}"></script>
<script src="{{asset('assets/libs/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<script src="{{asset('assets/libs/metismenu/metisMenu.min.js')}}"></script>
<script src="{{asset('assets/libs/simplebar/simplebar.min.js')}}"></script>
<script src="{{asset('assets/libs/node-waves/waves.min.js')}}"></script>
<!-- App js -->
<script src="{{asset('assets/js/app.js')}}"></script>
<!-- Page js -->
@stack('page-js')
This is how i call each of them in my app layout file.
This is for the css
<x-includes.head :title="$title" />
@push('page-css')
<!-- Custom Css-->
<link rel="stylesheet" href="{{asset('css/app.css')}}">
@endpush
This one for the js
<x-includes.scripts />
@push('page-js')
<script src="{{asset('js/app.js')}}"></script>
@endpush
But is not working. SUMMARY: What am trying to achieve is that, i want to able to use those components in each of my layouts. But i also want to be able inject custom page css and js to pages that have custom css and js files. The components works fine but the @stack and @push are not working. I also used @yield and @section and i didn't get any result. I want to know if am doing it right and also if there is another way to achieve this.