0👍
✅
Finally I found the solution I was looking for. As already mentioned, I can bundle them together in a single file but I could not figure out how to exactly do that.
I now have an app.js looking like this:
window.Vue = require('vue');
require('vue-resource');
Vue.component('Repository', require('./product_images/Repository.vue'));
or, while using npm:
import vSelect from "vue-select"
Vue.component('v-select', vSelect);
Further, I register vuejs filters and directives in that file
And finally my gulpfile:
elixir(function (mix) {
mix.webpack('app.js', {
outputDir: "public/js",
output: {
filename: "compiled-[name].js"
},
module: {
loaders: [{
test: /\.vue$/,
loader: 'vue'
}, {
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['es2015']
}
}]
},
watchOptions: {
poll: true
}
})
This leads to an app-compiled.js where all my components are registered without conflicting. In my blade files I simply use them in HTML without importing anything explicitly.
BTW: This is the way Laravel 5.3 is going for. There I finally figured it out, how to “pre-compile” all my vuejs components without any conflicts.
0👍
How about bundling them all into one dist file and just use the Vue.js component you need in your Laravel view?
Source:stackexchange.com