Making vue-table work with browserify / webpack

[mozami]

I've played around with this component and like it so far. Thank you @ratiw!

I tried to use it in a new laravel project (via browserify & using laravel elixir) and noticed it stopped working. Digging around, I see that because of the way it's structured, it wont work with browserify as it is trying to access Vue globally. Are there any plans to restructure it so it can be pulled into a project via require('vuetable') statement?

Im not an expert at this and still figuring out vue & browserify myself, but I think the component would need to be modularize / split into three .vue files: vuetable, vuetable-pagination, vuetable-pagination-dropdown. Each of these will have its own script, style and template code.

I might try and do this if I get some time and a chance to figure it out. I've added some links below for reference:

http://vuejs.org/guide/application.html#Modularization
https://github.com/vuejs/vueify
http://blog.tighten.co/setting-up-your-first-vuejs-site-using-laravel-elixir-and-vueify

Laracasts:
https://laracasts.com/series/learning-vue-step-by-step/episodes/13
https://laracasts.com/series/painless-builds-with-laravel-elixir/episodes/9

[ratiw]

@mozami I actually haven been working on it and have a working example for Semantic UI
for a week already. It is structured exactly as you've mentioned. Each component is in its own Vueify file because I like the idea of vueify very much, very easy and clean.

However, I mainly follow vue-cli with webpack example and I'm still trying to get to know it. Anyway, the main problem right now is that the way I embeded vuetable-pagination component inside vuetable making it no longer extensible because in order for the vueify version of vuetable to know the existing vuetable-pagination components, the pagination components have to be declared in the components section of vuetable.

I have been researching if there is any way to programmatically insert child component afterward, but it doesn't seem to be possible. So, I think I have to split the vuetable-pagination out of vuetable, which should be easy enough. But you will now have to manually include vuetable-pagination manually and it should still be extensible (I think). I will play around with it this week and let you know how it goes.

[mozami]

Im glad to hear you're already been working on this! Webpack is also a better choice than browserify, so that would be great.

I think I understand your problem.... your suggestion of splitting the vuetable-pagination from the vuetable looks a suitable workaround for now. If a better way of injecting the pagination directly into the component can be found in future (whilst still keeping it extensible), then the component can always be improved upon.

[nacr]

Hello I'm using browserify and I cant get this to work :|

[nacr]

Any help ?

[ratiw]

@nacr-dev I've never work with browserify before, but if you could show me your gulpfile.js and the html maybe I can figure something out.

[nacr]

Ok I will give it a go,

gulpfile:

var elixir = require('laravel-elixir');

require('laravel-elixir-vueify');

elixir(function(mix) {
   mix.browserify('app.js');
}

app,js

import Vue from 'vue';
import Resource from 'vue-resource';
import Validator from 'vue-validator';
import vuetable from 'vuetable';

import Clients from './components/clients/Clients.vue';

Vue.use( Resource );
Vue.use( Validator );
Vue.use( vuetable );


new Vue({
    el: '#app',

    components: {
        Clients
    },

    computed: {

    },

    ready() {
        console.log('APP Ready to go!');
    }

});

Clients.vue

<template>

    <div class="row">
        <div class="col-md-8">
            <div class="form-inline form-group">
                <label>Search:</label>
                <input v-model="searchFor" class="form-control" @keyup.enter="setFilter">
                <button class="btn btn-primary" @click="setFilter">Go</button>
                <button class="btn btn-default" @click="resetFilter">Reset</button>
            </div>
        </div>
        <div class="col-md-4">
            <div class="dropdown pull-right">
                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <i class="glyphicon glyphicon-cog"></i>
                </button>
                <ul class="dropdown-menu">
                    <li v-for="field in fields">
                            <span class="checkbox">
                                <label>
                                    <input type="checkbox" v-model="field.visible">
                                    {{ field.title == '' ? field.name.replace('__', '') : field.title | capitalize }}
                                </label>
                            </span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="table-responsive">

        <vuetable
                api-url="http://vuetable.ratiw.net/api/users"
                pagination-path=""
                :fields="fields"
                :sort-order="sortOrder"
                table-class="table table-bordered table-striped table-hover"
                ascending-icon="glyphicon glyphicon-chevron-up"
                descending-icon="glyphicon glyphicon-chevron-down"
                pagination-class=""
                pagination-info-class=""
                pagination-component-class=""
                pagination-component="vuetable-pagination-bootstrap"
                :item-actions="itemActions"
                :append-params="moreParams"
        ></vuetable>


    </div>


</template>

<style>



</style>

<script>

    export default{
        data(){
            return{
                msg:'hello vue'
            }
        },
        components:{

        }
    }

</script>

Then in the console I get:

app-94115391c7.js:15547Uncaught ReferenceError: Vue is not defined
75 @ app-94115391c7.js:15547
s @ app-94115391c7.js:1
(anonymous function) @ app-94115391c7.js:1
76../components/clients/Clients.vue @ app-94115391c7.js:16104
s @ app-94115391c7.js:1
e @ app-94115391c7.js:1
(anonymous function) @ app-94115391c7.js:1

Does it help?

[nacr]

I believe the problem is as @mozami referied in is initial post.

vuetable, vuetable-pagination, vuetable-pagination-dropdown have to be in three split .vue files.

[ratiw]

@nacr-dev @mozami After I've made the .vue file, where should I put them?

src\components or components

How would you include them in your source code with browserify and webpack?

[nacr]

Well maybe in src\components I am not shore of this.

the include part I believe it would be done in my app.js or in my .vue file, like this.

import theName from 'theName';

and then refer to it in the components I believe would need to test this.

but attention I'm using bootstrap and does components are semantic ready correct?

I that case I would not be using douse components.

[nacr]

well i made a simple test and I believe there is more to it than this.

I'm over my head here sorry.

[ratiw]

@nacr-dev This puzzles me a lot since most of the components I've seen has only one file, so it is easy to identify in the webpack.config.js or package.json. I'll keep researching and hopefully find a useful example. The vueify version is coming along quite well. I just don't understand how to release it for those who use browserify and webpack yet.

[nacr]

ok I will keep a eye on this issue :) 👍

Tks m:8ball:

[nacr]

@ratiw any Idea when we could test this out?

[mozami]

@ratiw Perhaps put your work in a separate git branch and we can see and test or contribute to it?

Ive been looking around at other components (that use multiple vue files), e.g VueBoot or vue-waterfall and think it may be possible to inject the pagination into the main vuetable component.

I can try and test with webpack as well.

[ratiw]

@nacr-dev I'm looking at publishing a dev branch with npm. I think you could try to pull in the dev branch and try it out using import or require and reference the path like so.

  var Vuetable = require('vuetable/src/components/Vuetable.vue')

@mozami Right now, I've found a way work with vuetable-pagination without having to take it out of vuetable. This is quite simple than I thought.

   var Vue = require('vue')
   var Vuetable = require('vuetable/src/components/Vuetable.vue')
   var VuetablePaginationBootstrap = require('vuetable/src/components/VuetablePaginationBootstrap.vue')

   Vue.component('vuetable', Vuetable)
   Vue.component('vuetable-pagination-bootstrap', VuetablePaginationBootstrap)

By registering components with Vue instead of declaring them in the components: section, Vue can now see and use it. That means you should be able to create your own pagination component, register it with Vue, and then use it by passing its name via vuetable's pagination-component prop.

[nacr]

ah! That would be fantastic :D as soon as it is online I will test it 👍

[mozami]

@ratiw - That seems like it might work! Will also give it a test once its up

[ratiw]

@nacr-dev @mozami I've published the beta version of vuetable via npm. This contains the vueify version in src/components directory.

According to the related doc, you will have to pull it in using this command:

npm install vuetable --tag beta

You would require it in your .js file like so,

var Vue = require('vue')
var VueResource = require('vue-resource')
var Vuetable = require('./components/Vuetable.vue')
var VuetablePaginationBootstrap = require('./components/VuetablePaginationBootstrap.vue')

Vue.use(VueResource)

Vue.component('vuetable', Vuetable)
Vue.component('vuetable-pagination-bootstrap', VuetablePaginationBootstrap)

new Vue({
    //...
})

I think it will work but I might be wrong. Please try and let me know how it goes.

[ratiw]

The beta tag does not pull in the develop branch as I thought. Will look into that first.

[ratiw]

Using this method instead,

npm install git://github.com/ratiw/vue-table#develop --save

[ratiw]

If you're using bower,

bower install git://github.com/ratiw/vue-table#develop --save

[ratiw]

@nacr-dev @mozami Ok, got it working as expected! :)

Please try it and let me know if there's any problem.

[ratiw]

See https://github.com/ratiw/vuetable-example-vueify-bootstrap

If everything is ok, I'll publish v1.0.11 afterward.

[nacr]

Hello, will use this method npm install git://github.com/ratiw/vue-table#develop --save

Will give feedback in minutes! :)

[nacr]

Hello,

It seems I will need to use full path like this,

'../../../node_modules/vuetable/src/components/Vuetable.vue'

and I get a error when I run Gulp:

[09:14:43] gulp-notify: [Laravel Elixir] Browserify Failed!: Unexpected token

C:\Users\Nuno.Rodrigues\Code\app\node_modules\vuetable\src\components\VuetablePaginationBootstrap.vue:1
<template>
^
ParseError: Unexpected token

[nacr]

Hmmm I get the same for Vuetable.vue

[09:35:29] gulp-notify: [Laravel Elixir] Browserify Failed!: Unexpected token

C:\Users\Nuno.Rodrigues\Code\zitauto\node_modules\vuetable\src\components\Vuetable.vue:1
<template>
^
ParseError: Unexpected token

[ratiw]

@nacr-dev It seems like browserify does not understand .vue file. There might be something missing in your guilpfile.js. In webpack, .vue file will be piped through vue-loader which parses out the template, script, and style sections.

[ratiw]

@nacr-dev Did you setup like this? https://github.com/JeffreyWay/laravel-elixir-vueify

[nacr]

Hello yes just like that.

[nacr]

well I changed the code to this:

components:{
            'vuetable': Vuetable,
            'vuetable-pagination-dropdown': VuetablePaginationDropdown,
            'vuetable-pagination-bootstrap': VuetablePaginationBootstrap,
},

Same result.

[ratiw]

@nacr-dev Try registering pagination components outside like I did.

Vue.component('vuetable-pagination-dropdown', VuetablePaginationDropdown)
Vue.component('vuetable-pagination-bootstrap', VuetablePaginationBootstrap)

Please note the, vuetable-pagination and vuetable-pagination-dropdown use Semantic UI for styling.
Since they are embbed inside vuetable, you cannot set its props directly. You have to broadcast event vuetable-pagination:setting from main vue instance to it.

new Vue({
    // ..
    ready: function() {
        this.$broadcast('vuetable-pagination:setting', 'icons', { prev: 'glyphicon glyphicon-chevron-left', next: 'glyphicon glyphicon-chevron-right'})
    }
})

[nacr]

Ok, I stand corrected :)

[nacr]

So at this moment I have no errors:

On main js in my case app.js,

import Vue from 'vue';
import Resource from 'vue-resource';
import Validator from 'vue-validator';

import Vuetable from './components/global/components/vuetable/Vuetable.vue';
import VuetablePaginationBootstrap from './components/global/components/vuetable/VuetablePaginationBootstrap.vue';
import VuetablePaginationDropdown  from './components/global/components/vuetable/VuetablePaginationDropdown.vue';

import Clients from './components/clients/Clients.vue';

Vue.use( Resource );
Vue.use( Validator );

Vue.component('vuetable', Vuetable);
Vue.component('vuetable-pagination-dropdown', VuetablePaginationDropdown)
Vue.component('vuetable-pagination-bootstrap', VuetablePaginationBootstrap)

And

in Clients.vue

I implement your sample code and all is working, I still have some stuff to check but no error in console.

[nacr]

But having to copy the .vue files to a dir in resource dir bugs me !

[mozami]

@nacr-dev Same here - im also trying to avoid that route. Playing around with the package now to see if we can do it another way.

[nacr]

@ratiw is there something missing the check boxes are not working.

[nacr]

@mozami will wait for you on that one :)

[mozami]

@nacr-dev unfortunately, havent gotten very far at the moment. I have also encountered the exact same issues as you. Will keep at it for now, and post back later with some updates.

[ratiw]

@nacr-dev The checkboxes are working fine with my example. Please check if you've bound them with v-model?

May be I'll try an example with browserify if I have time.

[nacr]

hmmm I simply changed the tableColumns data and the url from your exemple :|

[mozami]

@ratiw @nacr-dev I think im making some progress with browserify, though it will mean modifications on the package itself. If i get it working properly, Ill upload my work here or send a pull request.
Im not sure if this will break the existing webpack integration, but Ill test out webpack later to ensure.
Im heading out for a bit, will post back here a little later.

[nacr]

@mozami 👍

[mozami]

I think the problem was quite small in the end. @nacr-dev had gone through most of the issues before me, so I just picked up from where he (or she) left off.

@ratiw i have submitted a PR - Adding the browserify transform for vueify helps eliminate the following error that @nacr-dev described above:

[09:14:43] gulp-notify: [Laravel Elixir] Browserify Failed!: Unexpected token

C:\Users\Nuno.Rodrigues\Code\app\node_modules\vuetable\src\components\VuetablePaginationBootstrap.vue:1
<template>
^
ParseError: Unexpected token

All you need to do is add the following to the package.json file of the vuetable component:

  "browserify": {
    "transform": ["vueify"]
  },

This means you do not have to move anything to the resource folder.

As for declarations, I am using the same as @nacr-dev and everything seems to work fine:

import Vue from 'vue';
import Resource from 'vue-resource';
import Vuetable from 'vuetable/src/components/Vuetable.vue';
import VuetablePaginationBootstrap from 'vuetable/src/components/VuetablePaginationBootstrap.vue';
import VuetablePaginationDropdown  from 'vuetable/src/components/VuetablePaginationDropdown.vue';

Vue.use(Resource);
Vue.component('vuetable', Vuetable);
Vue.component('vuetable-pagination-dropdown', VuetablePaginationDropdown)
Vue.component('vuetable-pagination-bootstrap', VuetablePaginationBootstrap)

Although the component can be declared within the Vue instance as well without any problems for me.

@ratiw or @nacr-dev Can you confirm if this works for you?

[ratiw]

@mozami Yes, it does work! Browserify can now transform .vue file. Thanks a lot. :)

I've already updated the package.json of vuetable file to include the browserify section and pushed it up to the develop branch.

@nacr-dev You could run npm update and gulp should now able to compile .vue file.

[mozami]

@ratiw Great! Im tied up with some other stuff at the moment, but will test out with webpack later when I get a chance.

I wanted to refactor the component structure to have one index.js file that imports in the other ".vue" files, so that you would only need to require one "vuetable" component from your js. This would also require changing the way the pagination works - which is something you've already been through I believe. I ran into template fragmentation issues so put that off on hold:

[Vue warn]: Attributes "api-url=/api/urls", ":fields=columns", ":per-page=perPage" ... are ignored on component <vuetable> because the component is a fragment instance

[ratiw]

@mozami Yeah, the reason that I have another div to wrap around the table and pagination is to handle the fragment instant. I had been working on separating the pagination component out of vuetable as well. This will not cause fragment instance warning because it is now a separate component but the problem is that with this implementation, you are now responsible for wiring the event between vuetable and vuetable-pagination. It is not that difficult, but it is just not convenient as it is right now. But I'm open to any suggestion anyway. :)

[mozami]

@ratiw OK - I understand your decision. It also makes sense from the end user's point of view and keeping things simple. I'm good with how it is for now :)

[nacr]

Ok, now I can do It :) fantastic.

It Works.

[mozami]

👍 👍 I guess @ratiw can publish this now. Thanks!!

[ratiw]

Will try to do it tonight. @nacr-dev @mozami Thank you very much for help testing this thing. I'm really learning a lot during the process. :)

[nacr]

@ratiw thank you for the package it solves a gap I had with vue :)

[mozami]

Exactly - We should be thanking you here, @ratiw! We're all figuring it out here. I might have some more questions once I begin working with vue properly - is github issues preferred place to do so or just for issues?

[ratiw]

@mozami I think I would prefer you ask question in Laracasts Vue channel or Vue.js Forum. I usually learning something there. For issues, please use github as it is easier for me the track it here. Just tag me, so that I know about it. :)

[ratiw]

@nacr-dev In v1.0.11, you can do use vuetable-pagination:set-options to set props for pagination component.

If you use my example code, you can place this code in watch: section and the VuetablePaginationDropdown will use Twitter's Bootstrap styling.

new Vue({
    //...
    watch: {
        'paginationComponent': function(val, oldVal) {
            this.$broadcast('vuetable-pagination:set-options', {
                icons: {
                    prev: 'glyphicon glyphicon-chevron-left',
                    next: 'glyphicon glyphicon-chevron-right'
                },
                wrapperClass: 'form-inline',
                dropdownClass: 'form-control',
                linkClass: 'btn btn-default'
            })
        }
    }
})

So, update to the v1.0.11 and try it out.

[mozami]

@ratiw noted: will use the forums for Q&A

I'll give 1.0.11 a spin tomorrow and report back if there's any issues.