CODEWITHSUNDEEP
javascriptlaravellaravel-5.4
Heidel
Heidel

Reputation: 3254

Laravel 5.4 where to write javascript code?

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?

Upvotes: 0

Views: 5843

Answers (2)

Sebastian
Sebastian

Reputation: 1001

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
});

Upvotes: 3

Buglinjo
Buglinjo

Reputation: 2076

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');

Upvotes: 0

Related Questions