Search code examples
laravellaravel-bladelaravel-components

Push css/js files from one component to another

I created 2 components: layouts/app.blade.php and navigation.blade.php

The layouts/app.blade.php looks like this:

<body>
    @stack('styles')
    <x-navigation/>
</body>

The navigation.app.blade looks like this:

<nav>
    @push('styles')
        <link rel="stylesheet" href="navigation.css"/>
    @endpush
</nav>

The problem is that my @push() method is not working. From what I understand the component that is pushing should also extend the layout, but this is not possible because the navigation should not inherit all the layout's content. There's any possibility for me to send the css/js files from a component to another component without extending it?

Thank you!

Solution

  • Create a new file layouts/default.blade.php

    <body>
    @stack('styles')
    {{ $slot }}
</body>

    Change layouts/app.blade.php to

    <x-layouts.default>
    <x-navigation/>
    {{ $slot }}
</x-layouts.default>