[Vuejs]-How to organize vueify within laravel?

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?

Leave a comment