Laravel, right way to import javascript into Blade Templates

Solution 1:

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

Solution 2:

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.

Laravel, right way to import javascript into Blade Templates

Solution 1:

Solution 2:

Related

Recent Posts