Making vue-table work with browserify / webpack about vue-table HOT 77 CLOSED

@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.

from vue-table.

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.

from vue-table.

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

from vue-table.

Any help ?

from vue-table.

@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.

from vue-table.

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?

from vue-table.

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.

from vue-table.

@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?

from vue-table.

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.

from vue-table.

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

I'm over my head here sorry.

from vue-table.

@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.

from vue-table.

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

Tks m:8ball:

from vue-table.

@ratiw any Idea when we could test this out?

from vue-table.

@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.

from vue-table.

@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.

from vue-table.

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

from vue-table.

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

from vue-table.

@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.

from vue-table.

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

from vue-table.

Using this method instead,

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

from vue-table.

If you're using bower,

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

from vue-table.

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

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

from vue-table.

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

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

from vue-table.

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

Will give feedback in minutes! :)

from vue-table.

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

from vue-table.

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

from vue-table.

@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.

from vue-table.

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

from vue-table.

Hello yes just like that.

from vue-table.

If I do this,

import Vuetable from 'Vuetable';
import VuetablePaginationBootstrap from 'VuetablePaginationBootstrap';

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

Vuetable will pass but VuetablePaginationBootstrap will fail.

from vue-table.

Now like this,

import Vuetable from 'Vuetable';

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

Gulp has no error! Nack in five to check.

from vue-table.

I Still get the Vue is not defined erro 👎

from vue-table.

@nacr-dev How do you import Vue?

from vue-table.

On my app.js file I have it like this,

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

from vue-table.

I have my custom components an all is ok and I am look at yours and I can see the problem.

from vue-table.

Hmmm checking this!

https://laracasts.com/discuss/channels/vue/parseerror-unexpected-token-template

from vue-table.

I think you have to import it like i did

Import Vuetable from 'vuetable/src/components/Vuetable.vue'

From my understanding import and require are the same.

from vue-table.

@ratiw that way I still get

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

But if I do this

https://laracasts.com/discuss/channels/vue/parseerror-unexpected-token-template

no error.

Will give feed back in 10m

from vue-table.

Will have to go out for an hour or two. Will check back later though.

from vue-table.

ok 👍

from vue-table.

This last method worked for me. It seems, .vue files have to be in the resource folder!

from vue-table.

The only error I'm having is this

app-4ce6c70882.js:6502 [Vue warn]: Failed to resolve component: vuetable-pagination-bootstrap (found in component: <vuetable>)

from vue-table.

@nacr-dev Did you import and register it?

Import Vue from 'vue'
Import VueResource from 'vue-resource'
Import Vuetable from 'vuetable/src/components/Vuetable.vue'
Import VuetablePaginationBootstrap from 'vuetable/src/components/VuetablePaginationBootstrap.vue'

Vue.use(VueResource)

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

from vue-table.

Seems like im missing out on the action here - Im going to give this a try shortly and report back as well.

@ratiw - did you test this with webpack or browserify?

from vue-table.

@mozami with webpack. See here

from vue-table.

@ratiw Thanks - I've got browserify setup at the moment, will check there first and then with webpack as well later.

from vue-table.

@mozami give some feedback on browserify so I can check if I missed something

from vue-table.

@ratiw I will check!

from vue-table.

@ratiw since I'm in side a component my self what I did was

components:{
            Vuetable, VuetablePaginationDropdown, VuetablePaginationBootstrap
},

from vue-table.

@nacr-dev So far i'm getting exactly the same errors that you experienced earlier, so pretty much following your answers at the moment. Hang tight, I will report back here once I have something working or if can't get any further...

from vue-table.

tks m:8ball:

from vue-table.

well I changed the code to this:

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

Same result.

from vue-table.

@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'})
    }
})

from vue-table.

Ok, I stand corrected :)

from vue-table.

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.

from vue-table.

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

from vue-table.

@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.

from vue-table.

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

from vue-table.

@mozami will wait for you on that one :)

from vue-table.

@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.

from vue-table.

@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.

from vue-table.

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

from vue-table.

@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.

from vue-table.

@mozami 👍

from vue-table.

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?

from vue-table.

@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.

from vue-table.

@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

from vue-table.

@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. :)

from vue-table.

@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 :)

from vue-table.

Ok, now I can do It :) fantastic.

It Works.

from vue-table.

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

from vue-table.

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. :)

from vue-table.

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

from vue-table.

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?

from vue-table.

@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. :)

from vue-table.

@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.

from vue-table.

@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.

from vue-table.