Laravel, right way to import javascript into Blade Templates

Anything outside of your @section block will not be rendered.

You could edit your layouts/app.blade.php and add a @stack('head') where you want your styles/javascript to appear (preferably in the <head> section of your HTML).

In any blade file that @extends('layouts.app') you can then use 

@push('head')
<!-- Styles -->
<link href="{{ asset('css/pizza.css') }}" rel="stylesheet">
<!-- Scripts -->
<script src="{{ asset('js/components/pizza.js')}}"></script>
@endpush

to push content into that stack.

For more information visit https://laravel.com/docs/5.6/blade#stacks


For custom scripts on specific page,

  • add @yield('footer-scripts') to layouts/app.blade.php

  • create a folder named 'scripts' in views folder

  • inside views/scripts folder create a file 'pizza-script.blade.php' and add the js file contents inside

    <script src="/path/to/pizza.js" />   <!-- it might not work if path isn't clear -->

<script type="text/javascript">
    console.log('executing js here..')
   js file contents....

  #if jquery needed add it like, 

  $(document).ready(function(){
    ...
  }
</script>

  • in your index.blade.php (or the page where you want the scripts to execute) at the end add the script after @endsection

      @section('footer-scripts')
      @include('scripts.pizza-script')
  @endsection

now refresh the page, you can see 'executing js here..' on the console.

Tags:

Javascript

Php

Laravel

Laravel Blade

Recent Posts