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?

score 0 · Answer 1 · answered Aug 13 '16 at 09:45

0

How about bundling them all into one dist file and just use the Vue.js component you need in your Laravel view?

answered Aug 13 '16 at 09:45

robbash

985
10
21

well, I am concerned of unnecessary data exchanged between server and client but maybe I just have too less confidences in client caching a big JS file at least during the whole session!? – patriziotomato Aug 13 '16 at 21:29
That file definitely should be cached, there are several ways to set caching in the response header (PHP/Laravel, Apache, Nginx). Put a version number or unique identifier in a query string or file name appendix so the browser will load it again once the version changes. (In dev mode you can just disable cache, i.e. via browser dev tools) – robbash Aug 14 '16 at 07:52
What happens with the multiple Vue instances, all bound to "body"-tag in my case. Don't they conflict in this situation? – patriziotomato Aug 16 '16 at 11:28
How about one main Vue.js instance containing all components and in HTML go with ``. (Not sure how much of the unused components Vue.js loads/instanciates, but I'd expect it to be smart enough to just do what's necessary.) Other option is to use different ids: ``. – robbash Aug 17 '16 at 04:40

score 0 · Accepted Answer · answered Nov 16 '16 at 17:13

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.

How to organize vueify within laravel?

2 Answers2