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.
Rate this post
3 of 5 based on 1310 votesComments