Using stacks in Laravel 8

I’m building a site using Laravel 8 and Jetstream. Jetstream is opinionated about the javascript / css framework, which is great, but I’m needing to add an external javascript library to one of my components, and I don’t see anywhere to add them in the default app layout. So I added a stack for the css /js like this in the default app layout:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        // head stuff
        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Styles -->
        <link rel="stylesheet" href="{{ mix('css/app.css') }}">

        @livewireStyles
        @stack('css') // added this stack

        <!-- Scripts -->
        <script src="{{ mix('js/app.js') }}" defer></script>
    </head>
    <body class="font-sans antialiased">
        // body stuff
    </body>
    @stack('scripts') // and this stack
</html>

JavaScript
​x
 
<!DOCTYPE html><html lang="{{ str_replace('_', '-', app()->getLocale()) }}">    <head>        // head stuff        <title>{{ config('app.name', 'Laravel') }}</title>​        <!-- Styles -->        <link rel="stylesheet" href="{{ mix('css/app.css') }}">​        @livewireStyles        @stack('css') // added this stack​        <!-- Scripts -->        <script src="{{ mix('js/app.js') }}" defer></script>    </head>    <body class="font-sans antialiased">        // body stuff    </body>    @stack('scripts') // and this stack</html>​

Then in my child view that extends the app layout, I’m trying to push the js file to the js stack:

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Stuff & Things') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
                <x-component.stuffnthings />
            </div>
        </div>
    </div>
</x-app-layout>
@push('scripts')
    <script src={{public_path("js/mobiscroll.javascript.min.js")}}></script>
@endpush

JavaScript
 
<x-app-layout>    <x-slot name="header">        <h2 class="font-semibold text-xl text-gray-800 leading-tight">            {{ __('Stuff & Things') }}        </h2>    </x-slot>​    <div class="py-12">        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">                <x-component.stuffnthings />            </div>        </div>    </div></x-app-layout>@push('scripts')    <script src={{public_path("js/mobiscroll.javascript.min.js")}}></script>@endpush​

When I view source, the js file isn’t there in the child view. What am I missing? Is this the right way to add custom js / css to Jetstream or is there a better way?

Answer

For anyone banging their head against a similar wall– the problem with my code is that the push needs to be inside the layout tag. Once I moved that up, it worked (and I had been using public_path wrong):

<x-app-layout>
<x-slot name="header">
    <h2 class="font-semibold text-xl text-gray-800 leading-tight">
        {{ __('Stuff & Things') }}
    </h2>
</x-slot>

<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
            <x-component.stuffnthings />
        </div>
    </div>
</div>
@push('scripts')
    <script src={{"js/mobiscroll.javascript.min.js"}}></script>
@endpush
</x-app-layout>

JavaScript
 
<x-app-layout><x-slot name="header">    <h2 class="font-semibold text-xl text-gray-800 leading-tight">        {{ __('Stuff & Things') }}    </h2></x-slot>​<div class="py-12">    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">            <x-component.stuffnthings />        </div>    </div></div>@push('scripts')    <script src={{"js/mobiscroll.javascript.min.js"}}></script>@endpush</x-app-layout>​

I’ll leave this open in case there’s a better way to accomplish this!

Advertisement

Answer