How to organize vueify within laravel?

Question

I want to use Vueify in my Laravel project. I have different Vuejs components using Vueify (*.vue files). My question is about how to best organize the required files and also optimize JS code sent to browsers.

Basically I would like to use such components directly in my blade template that includes my Vue instance. But since I need to compile that *.vue files, I cannot reference them directly in my template. With that, I mean doing stuff like:

import Timeline from "./components/Timeline.vue";

within my blade template is not working.

Thus I created a dedicated JS file for each blade template where I store the Vue object that includes the components. This doesn't feel right. For example it make my gulp file looks like:

mix.browserify('models.js', 'public/js/compiled-models.js');
mix.browserify('campaigns.js', 'public/js/compiled-campaigns.js');
mix.browserify('campaigns_edit.js', 'public/js/compiled-campaigns_edit.js');
mix.browserify('product.js', 'public/js/compiled-product.js');
...

I hope you know what I mean. I did it like that, because I was afraid of combining all components to a single app.js file. I did not find any information about what is the way to go here.

Basically I would love to get rid of all *.js files because they are just my way to get components compiled down. Or, at least I do not want to create one file per "page".

How to organize this?

Answer 1

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.