Laravel 5.4 where to write javascript code?

Question

I'm really sorry for an absolutely stupid question but I don't understand where I should write js code in Laravel 5.4. My site will consist of 2 parts, one for users app and other one for admin dashboard, and every part will have its own js and css files, so it's my webpack.mix.js

mix.js('resources/assets/js/app.js', 'public/js/app.js')
   .js('resources/assets/js/dashboard.js', 'public/js/dashboard.js')
   .sass('resources/assets/sass/app.scss', 'public/css/dashboard.css')
   .less('resources/assets/less/app.less', 'public/css/app.css');

Files
resources/assets/js/dashboard.js

require('./bootstrap');
Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app'
});

resources/assets/js/app.js

require('./bootstrap');
Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app'
});

Where do I write my own code?

What do you want to code? Own Vue Components? VanillaJS? jQuery? — Sebastian
– Sebastian, Commented Feb 20, 2017 at 16:02
I don't know what is Vue, I've never used it. I want to add jQuery code. — Heidel
– Heidel, Commented Feb 20, 2017 at 16:06

Sebastian · Accepted Answer · 2017-02-20 16:09:58Z

3

The app.js or dashboard.js files in your resources/assets/js/ folder are normal JS files. So you can add your code directly there, e.g.:

dashboard.js

require('./bootstrap');
Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app'
});

$(document).ready(function() {
    ///Your code here
});

But don't forget to include the js files in your public folder to your HTML file.

If you don't want to use VueJS in your project you can remove it entirely.

dashboard.js

require('./bootstrap');

$(document).ready(function() {
    ///Your code here
});

answered Feb 20, 2017 at 16:09

Sebastian

1,0111 gold badge8 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Heidel Over a year ago

I removed all code from resources/assets/js/dashboard.js and added $(document).ready(function() { alert(1);}); to it and then npm run dev, but after it nothing happened, code doesn't work and dashboard.js contains a lot of other code, but not mine.

Sebastian Over a year ago

The additional code comes from the bootstrap file which you require. Do you add the dashboard js file to your HTML code like this: <script src="js/dashboard.js"></script> ?

Heidel Over a year ago

It looks like I have a problem with caching, after I updated the files using the F5, everything worked.

Buglinjo · Accepted Answer · 2017-02-20 16:08:07Z

0

You should create 2 files for example: admin.js and front.js. Than compile it in public/js directory as separate js files:

mix.webpack('resources/assets/js/admin.js', 'public/js/admin.js')
.webpack('resources/assets/js/front.js', 'public/js/front.js')

and use it separately in the layouts.

In your admin.js file example:

window.jQuery = window.$ = require('./jquery-3.1.1.js');
require('./bootstrap');
require('./bootstrap-tagsinput');
require('./bootstrap-progressbar');
require('./custom.js');
require('./jquery.nestable.js');
require('./canvas-to-blob');
require('./purify');
require('./bordercoloranimate');
window.sweetAlert = require('./sweetalert.min.js');

answered Feb 20, 2017 at 16:08

Buglinjo

2,0861 gold badge18 silver badges27 bronze badges

Collectives™ on Stack Overflow

Laravel 5.4 where to write javascript code?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related