Message:

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>

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

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?

My Answer:

html







    

    



    

    



    {{ config('app.name', 'Laravel') }}



    

    



    

    



    @stack('css')







    

        @inertia

    




    

    



    @stack('js')

Then in your component file, you can push your external javascript library to the stack like this:

php

@push('js')

    

@endpush

This will add the external javascript library to the end of the scripts section in your layout file.

John Davidson

javascript - Using stacks in Laravel 8

Rate this post

Comments