vuetable-pagination component issue

[vijaythecoder]

Hey @ratiw Thanks for the great plugin. When I set it up, there is issue with pagination component, I tried to pass through props too but it shows me the same error always

[Vue warn]: Failed to resolve component: vuetable-pagination (found in component: <vuetable>

any help would be highly appreciated

[ratiw]

@vijaythecoder How do you install vuetable? Direct include in the <script> tag or use NPM?

[vijaythecoder]

I have used npm

[vijaythecoder]

for npm we dont need to import vue-table right ? I have included the components. The table is being generated as expected but the pagination is the problem

[ratiw]

Then, please check out this example and see if it helps. If not, let me know.

[vijaythecoder]

I have seen those examples, but no luck :( Here is my code

<template>
    <a v-link="{ path: '/items/create' }">Create Item</a>
    <vuetable
        api-url="http://vuetable.ratiw.net/api/users"
        table-wrapper="#content"
        :pagination-component="VuetablePagination"
        :fields="columns"
        :item-actions="itemActions"
    ></vuetable>
</template>

//
// secondly, require or import Vuetable and optional VuetablePagination component
//
import Vuetable from 'vuetable/src/components/Vuetable.vue';
import VuetablePagination from 'vuetable/src/components/VuetablePagination.vue';
import VuetablePaginationDropdown  from 'vuetable/src/components/VuetablePaginationDropdown.vue';
import VuetablePaginationBootstrap from 'vuetable/src/components/VuetablePaginationBootstrap.vue';

    export default {
        data () {
            return {
                columns: [
                    'name',
                    'nickname',
                    'email',
                    'birthdate',
                    'gender',
                    '__actions'
                ],
                itemActions: [
                    { name: 'view-item', label: '', icon: 'zoom icon', class: 'ui teal button' },
                    { name: 'edit-item', label: '', icon: 'edit icon', class: 'ui orange button'},
                    { name: 'delete-item', label: '', icon: 'delete icon', class: 'ui red button' }
                ]
            }
        },
        components : {
            Vuetable,
            VuetablePagination,
            VuetablePaginationDropdown,
            VuetablePaginationBootstrap
        },
        methods: {
            viewProfile: function(id) {
                console.log('view profile with id:', id)
            }
        },
        events: {
            'vuetable:action': function(action, data) {
                console.log('vuetable:action', action, data)
                if (action == 'view-item') {
                    this.viewProfile(data.id)
                }
            },
            'vuetable:load-error': function(response) {
                console.log('Load Error: ', response)
            }
        }
    }

let me know if I am missing something :(

[ratiw]

@vijaythecoder Try removing :pagination-component="VuetablePagination" line, or change it to pagination-component="vuetable-pagination", like so:

<template>
    <a v-link="{ path: '/items/create' }">Create Item</a>
    <vuetable
        api-url="http://vuetable.ratiw.net/api/users"
        table-wrapper="#content"
        :fields="columns"
        :item-actions="itemActions"
    ></vuetable>
</template>

Or,

<template>
    <a v-link="{ path: '/items/create' }">Create Item</a>
    <vuetable
        api-url="http://vuetable.ratiw.net/api/users"
        table-wrapper="#content"
        pagination-component="vuetable-pagination"
        :fields="columns"
        :item-actions="itemActions"
    ></vuetable>
</template>

And, VuetablePaginationBootstrap was already deprecated. You can remove it. VuetablePagination is working in Bootstrap as well.

[vijaythecoder]

not sure what is wrong but no matter how I try its not working. I have used your code too from the example. it doesn't work but when I clone and run your code, it works fine.

will there be a problem if I use it with webpack module bundler? I think thats not the case.

and the pagination-component is optional right? so even when I remove that line it doesn't work :(

[ratiw]

@vijaythecoder In the following code, you're trying to refer to a variable data in main vue instance named VuetablePagination, which is not defined.

<template>
    <a v-link="{ path: '/items/create' }">Create Item</a>
    <vuetable
        api-url="http://vuetable.ratiw.net/api/users"
        table-wrapper="#content"
        :pagination-component="VuetablePagination"
        :fields="columns"
        :item-actions="itemActions"
    ></vuetable>
</template>

pagination-component prop is actually optional. When you omit it, vuetable will use the default pagination component, which is vuetable-pagination. But if you include it, you have to specify it correctly.

        //...
        components : {
            Vuetable,
            VuetablePagination,
            VuetablePaginationDropdown,
        },
        //...

is a shorthand for,

        //...
        components : {
            'vuetable': Vuetable,
            'vuetable-pagination': VuetablePagination,
            'vuetable-pagination-dropdown': VuetablePaginationDropdown,
        },

So, you have to refer to is as pagination-component="vuetable-pagination". No color : at the beginning.

You should also try to remove vuetable from node_modules and reinstall it again to see if it fixes the problem.

[vijaythecoder]

yeah I tried everything passing as string or passing as object wiht : but no luck. let me try reinstalling the plugin.

[vijaythecoder]

Thanks a lot for your effort, I really appreciate it. I will post here if I can fix it.

[ratiw]

You can try using it using <script> to get it working first and work back on what makes it doesn't work.

[vijaythecoder]

I tried everything almost for 8 hours and no luck. I have some data from component but the pagination is not being generated. you see? there is text saying Displaying 1 to 4 of 200 items but no pagination

also the rendered html is

[ratiw]

@vijaythecoder Can you put your code on github? Maybe I can have a look.

[vijaythecoder]

@ratiw do you mind if I give access to my laravel repository? or you are comfortable with plain html ?

[ratiw]

@vijaythecoder Please create small project and putting only the part that causes the problem and put it on GitHub so that I can have a look and see if I can help. Please also make sure that the build process is in tact. No need to give me access to your project even if it's a personal project. I'd rather no do that.

[vijaythecoder]

I don't have a problem in giving access to that project since it is too early stage. but yeah I can set up a repo with necessary files. Thanks a lot for you positive responsive 👍

[vijaythecoder]

Hi @ratiw , I have given access to the repo which I setup now. Thanks once again for your continious support

[ratiw]

@vijaythecoder In your code, you did not import and register VuetablePagination component.

[vijaythecoder]

I did remove it before uploading to github. I tried not to pass so that it takes default and also I tried to pass as object by appending : to the prop and also I tried passing as string through prop. but no luck. can you try pulling the code and debug? if you got some time, if its too much to ask, its ok. sorry for the trouble

[ratiw]

@vijaythecoder It's already working. I just add a few line of codes and now the pagination is already showing and working. Please pull the code and npm run dev to see it. Or check the commit log on what I've added.

[bootstrapguru]

@ratiw Thanks lot for the fix. I still don't understand why it did not work the other way. Ecma script. I have initialized the component through components option on the export module. it didn't work that way. Once again thanks a lot , you are awesome at helping.

[ratiw]

@bootstrapguru I'm not sure as well. I initially wrote vuetable in pure javascript. Then, NPM was requested and added later by the help of another developer. Hopefully, in v.2 it would be better.

[hjc1702]

@vijaythecoder hi, I have the same problem. Do you fix it?

[vijaythecoder]

@hjc1702 yeah its fixed, are you trying to use it without vue.component? this plugin works only with normal vue standard. Not ECMA script. I mean you should use it in the following way

Vue.component('vuetable-pagination', VuetablePagination);

[laozhuang727]

But in some case, we don't want to use the vue standard, and prefer to use the ECMA script. What should we do?

I am also facing the same issue today. And it is very difficult to find the solution

[vijaythecoder]

@laozhuang727 yeah true, actually i tried using ECMA for almost a 4 days and then finally asked ratiw to help me. He fixed it using Vue.component so I had no other choice to use it that way. May be this plugin will support ECMA too in future, if you can fix that you can make a pull request :) I am sure so many will love it. Right now I am using Vue.standard for almost 8 modules.

[ratiw]

Sorry guys. I'm quite confused here. What do you mean by vue standard? What is it going to do with ECMA script (do you actually mean ES6)? I couldn't tell the different really. Any explanation would greatly be appreciated.

[laozhuang727]

If we use it as the vue standard: import Vue from 'vue' Vue.component('vuetable-pagination', require('./VuetablePagination.vue')) export default Vue.extend({ components: { MyNav, VuetableSearchToolBar, VuetableSettingsModal, Vuetable // VuetablePagination, } })

it is ok

but we use it as the ES6 script import VuetablePagination from './VuetablePagination.vue'

export default { components: { VuetableSearchToolBar, //I make it as a vue component, this is working fine VuetableSettingsModal, // same as above Vuetable VuetablePagination, //failed } }

the pagination can not be showed.

this issue also happen when I try to make the custom-action html section into a vue component. I think it is a same issue.

@ratiw, would you please help to tell how to fix it?

[vijaythecoder]

same as @laozhuang727 , just formatted

If we use it as the vue standard:

import Vue from 'vue'
Vue.component('vuetable-pagination', require('./VuetablePagination.vue'))

export default Vue.extend({
    components: {
        MyNav,
        VuetableSearchToolBar,
        VuetableSettingsModal,
        Vuetable
        // VuetablePagination,
    }
})

it is ok

but we use it as the ES6 script

import VuetablePagination from './VuetablePagination.vue'

export default {
    components: {
        VuetableSearchToolBar, //I make it as a vue component, this is working fine
        VuetableSettingsModal, // same as above
        Vuetable
        VuetablePagination, //failed
    }
}

the pagination can not be showed.

this issue also happen when I try to make the custom-action html section into a vue component. I think it is a same issue.

@ratiw, would you please help to tell how to fix it?

[ratiw]

@vijaythecoder @laozhuang727

I'm not really sure how to fix this actually. I personally thought that it has something to do with the bundle of vue-table.js file. Or in the package.json where "main": "dist/vue-table.js" because it used to pointed to "main": "src/vue-table.js" but I cannot be totally sure as I'm not familiar with ES6 and webpack things.

But I think the obvious solution of registering vuetable-pagination globally via Vue.component(..) is easy enough at the moment.

I hope this will not be any problem in version 2 of vuetable anyway as the vuetable-pagination is no longer embedded inside vuetable.

[vijaythecoder]

@ratiw thanks for the continuous support. Also the normal pagination is rendered as

<div class="ui right floated pagination menu">
    <a class="btn-nav icon item ">
            <i class="angle double left icon"></i><!--v-if-->

    </a>
    <a class="btn-nav icon item ">
            <i class="left chevron icon"></i><!--v-if-->

    </a>
    <!--fragment-start--><!--v-for-start--><a class="item ">
                1
           </a><a class="item active large">
                2
           </a><a class="item ">
                3
           </a><a class="item ">
                4
           </a><a class="item ">
                5
           </a><!--v-for-end--><!--fragment-end--><!--v-if-->

    <a class="btn-nav icon item ">
        <i class="right chevron icon"></i><!--v-if-->

    </a>
    <a class="btn-nav icon item ">
        <i class="angle double right icon"></i><!--v-if-->

    </a>
</div>

is there a way to generate it with ul>li>a tags? as the style supports bootstrap pagination. or is there anything that I am missing?

[vijaythecoder]

@ratiw I found it, also I found couple of things it will be great if you can add this as optional

<div class="vuetable-pagination-info {{paginationInfoClass}}"
                 v-html="paginationInfo">
            </div>

and also this is hard coded, I dont find a way to remove that

.vuetable-pagination {
      background: #f9fafb !important;
    }

[ratiw]

@vijaythecoder You can create your own pagination component and instructs vuetable to use it.

If you look at the source code of VuetablePagination, you will see that it contains only the template and make use of VuetablePaginationMixin. So, you could easily create your own pagination component by making/modifying the template and include VuetablePaginationMixin. All functionalities are already defined in the mixin, you don't need to do anything more than copying from the existing template and modify it to your needs.

VuetablePaginationDropdown is also using the same mixin. It just add additional prop and methods to it.

I've re-written (a few month back) VuetablePagination to be relative easy to use in any CSS framework using just <div> and <a> tags. You will need to override the CSS for those class to suit your needs. You could also use vuetable-pagination:set-options event to change the pagination props as well.

If you prefer to use it in a certain way, the only way is to make a pagination component using the provided mixin which should be relatively easy to do.

[vijaythecoder]

yeah I have copied component and modified :)

[yantaosh]

i have the same trouble , how to solve it

[vijaythecoder]

@a119347 check this comment https://github.com/ratiw/vue-table/issues/77#issuecomment-244934946

[yantaosh]

@vijaythecoder thx

[ioalloc]

I fixed the problem by import VuetablePagination to Vuetable and register as a component.

Vuetable.vue:

...

<script>
  import VuetablePagination from './VuetablePagination.vue'
  export default {
    components: {
      VuetablePagination
    }
...

[maulshh]

I'm also struggling on the same problem, and it surely is a weird one. I used the dist version of vuetable-2 using require('vuetable-2') and somehow all the vuetable and other component doesn't work inside one component I've created. I have tried using the require('vuetable-2/src') and the problem persist. It doesn't work until I import each vuetable component on my every table *.vue-file or register it globally using the standard format just like mentioned above.

I used a fresh-install laravel, following the examples and some other configuration to get a clue on what caused this :' maybe it's a compatibility problem with laravel-mix (webpack) but as how the dist file and src from npm unusable is kind of irritating.