How to use seperate js files in Laravel Blade
Question
I'm trying to have different JS files for each Blade View in Laravel to help keep the project structure clean.
My problem is, when I try to access a function from that JS file in a Blade view, the console returns an error of:
Uncaught ReferenceError: myFunc is not defined at HTMLButtonElement.onclick
But the file is there and it logs the console message from that js file.
Here are my files and structure:
resources/js/index.js
console.log("Hello from index js");
function myFunc() {
console.log("Hello");
}
resources/views/layout/master.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
</head>
<body>
@yield('content')
{{-- @yield('js') --}}
@stack('js')
</body>
</html>
resources/views/index.blade.php
@extends('layout.master')
@section('content')
<h1>Works</h1>
<button onclick="myFunc()">Click</button>
@endsection
@push('js')
<script src="{{ asset('js/index.js')}}"></script>
@endpush
webpackmix.mix.js
const mix = require("laravel-mix");
mix.js("resources/js/app.js", "public/js").postCss(
"resources/css/app.css",
"public/css",
[
//
]
);
mix.js("resources/js/index.js", "public/js");
2 answers
solution1
0 2022-01-26 11:02:54
Your function defined in script that loaded after main body content, but you trying to access this function in main body content.
- Try to switch to selector for the button in JS file
- Or load script sync before body (BAD: defers content render)
solution2
0 2022-12-01 06:56:18
@murrayOB you can just create your separate js file in public and then js folder and just include it in your default.blade.php file like that <script src="{{asset('js/common-flow.js')}}"></script> and after that just call any function from blade file written in that specific common-flow file
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.