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?
Advertisement
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>
I’ll leave this open in case there’s a better way to accomplish this!