Wayne Smallman Wayne Smallman - 4 months ago 76
Javascript Question

Vue.js: Laravel Mix not combining files

I'm using Laravel 5.4 with Node.js 6, and Vue.js 2.

In

resources/assets/js/app.js
I have:

require('./bootstrap');

window.Vue = require('vue');

Vue.use(require('vue-resource'));


In
webpack.mix.js
I have:

mix.combine([
'resources/assets/js/app.js',
'resources/assets/js/enhanced.js',
'resources/assets/js/search.js'
], 'public/js/app.js')
.sass('resources/assets/sass/app.scss', 'public/css');


In
resources/assets/js/enhanced.js
I have:

require('./app')

var Search = require('./components/Enhanced.vue');

const app = new Vue({
el: '#app_page_enhanced',
render: app_page_enhanced => app_page_enhanced(Page_Enhanced)
});


In
resources/assets/js/search.js
I have:

require('./app')

var Search = require('./components/Search.vue');

new Vue({
el: '#app_search',
render: app_search => app_search(Search)
})


I have
npm run watch-poll
running in a Terminal window.

However, I keep getting an error on line 8 of
app.js
:


require('./bootstrap');


When I comment that line out, the process goes through without additional errors, but when I look at:
public/js/app.js
the separate
.js
files aren't included.

I've tried removing:
require('./app')
from the two
.js
files, and:

mix.combine([ ... ], 'public/js/')


... and:

mix.combine([ ... ], 'public/js/', 'public/js/app.js')


... but it made no difference.

It's worth mentioning that the code for Vue works when in the
app.js
file.

I've cobbled this together based on the bits I've scavenged, as I've not been able to find an official guide.

Update

In terms of the core problem, @tompec has helped fix it.

However, I thought this would cure the massive number of errors I get when running the search page and featured results page, where each page is executing the Vue code for both pages, causing the errors.

Answer Source

Try to do something like that

mix.js([
    'resources/assets/js/app.js',
    'resources/assets/js/enhanced.js',
    'resources/assets/js/search.js'
], 'public/js/app.js')
   .sass('resources/assets/sass/app.scss', 'public/css');

and remove require('./app') from resources/assets/js/enhanced.js and from resources/assets/js/search.js.

And here's the doc: https://github.com/JeffreyWay/laravel-mix/tree/master/docs