When passing a Laravel paginator response to the data prop of this component I receive the following error:

Invalid prop: type check failed for prop "data". Expected Object, got Array.

The problem is, the data passed to the data prop is, in fact, an object and is indicated as so in Vue DevTools.

As you can see from the screenshot above, it is indeed an object, as expected by the component and indicated in the docs.

I'm using Vue 2.

Unless the type check is on the data property of the paginator response, then something is going wrong here.

That said, in the docs, it gives an example of the type of response required, and the data property of the paginator response is an array:

{
    current_page: 1,
    data: [],
    from: 1,
    last_page: 1,
    next_page_url: null,
    per_page: 10,
    prev_page_url: null,
    to: 1,
    total: 0,
}

Hi, I am getting this error. Am I doing something wrong? Thanks.

[Vue warn]: Error in render: "TypeError: Cannot create property 'default' on boolean 'true'"

found in

---> <Pagination>
       <User> at resources/js/components/User.vue
         <Root>

TypeError: Cannot create property 'default' on boolean 'true'
    at Proxy.resolveScopedSlots (app.js:69748)
    at Proxy.render (app.js:18948)
    at VueComponent.Vue._render (app.js:70386)
    at VueComponent.updateComponent (app.js:70886)
    at Watcher.get (app.js:71284)
    at Watcher.run (app.js:71359)
    at flushSchedulerQueue (app.js:71117)
    at Array.<anonymous> (app.js:68845)
    at flushCallbacks (app.js:68771)

Screen Shots:

Hi, I am trying to use this pagination package for Vue 3 and Laravel 7 but I got an error

http://prntscr.com/10xwf27

main.js

let app = createApp(App);
app.component('pagination', require('laravel-vue-pagination'));
app.mount("#app");

Is it support Vue 3 ???

Hi,

I have been stuck on this issue for 2 days now. Everything is returning OK from laravel side, component is loading up data from Vue side and getting mounted without any errors. But not rendering in DOM. Please refer the screen shots.

Screenshot 1

Screenshot 2

Please help me if I'm doing something wrong or any prop I am missed to initiate?

Regards, Jassi

I have implemented your package with vue 2.5.17 and laravel 5.8. Now error is showing in console and everything works fine. But pagination is not showing. I think it is not supporting laravel 5.8

Hi, I just installed this and I think I did everything in documentation but somehow it won't work,

controller

$projects = Project::orderby('id', 'desc')->paginate(10);

vue template

<pagination :data="projects" @pagination-change-page="load"></pagination>

component script

import pagination from 'laravel-vue-pagination';  //added here
    export default {
        data() {
            return {
                projects: []
            }
        },
        mounted: function() {
            if (this.projects.length) {
                return;
            }
            this.load()
        },
        methods: {
            load: function(page) { //added here
                if (typeof page === 'undefined') {
                    page = 1 //added here
                }
                axios.get('/api/projects?page=' + page) //added here
                .then(
                    response => {
                        this.projects =  (response.data);
                    }     
                )
                .catch(function (error) {
                    this.errors.push(error);
                    console.log(error);
                })
            }
        }
    }

Question

Did I do something wrong? How to fix this?

the result of npm watch

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 206:35-53 export 'createElementVNode' (imported as 'createElementVNode') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 207:35-53 export 'createElementVNode' (imported as 'createElementVNode') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 213:35-53 export 'createElementVNode' (imported as 'createElementVNode') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 214:35-53 export 'createElementVNode' (imported as 'createElementVNode') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 216:52-68 export 'resolveComponent' (imported as 'resolveComponent') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 217:9-18 export 'openBlock' (imported as 'openBlock') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 217:22-33 export 'createBlock' (imported as 'createBlock') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 225:13-20 export 'withCtx' (imported as 'withCtx') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 226:63-72 export 'openBlock' (imported as 'openBlock') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 226:76-94 export 'createElementBlock' (imported as 'createElementBlock') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 226:101-111 export 'mergeProps' (imported as 'mergeProps') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 234:68-77 export 'openBlock' (imported as 'openBlock') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 234:81-99 export 'createElementBlock' (imported as 'createElementBlock') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 236:17-31 export 'normalizeClass' (imported as 'normalizeClass') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 238:10-28 export 'createElementVNode' (imported as 'createElementVNode') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 238:34-44 export 'mergeProps' (imported as 'mergeProps') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 243:13-23 export 'toHandlers' (imported as 'toHandlers') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 244:12-22 export 'renderSlot' (imported as 'renderSlot') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 249:17-35 export 'createCommentVNode' (imported as 'createCommentVNode') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 250:9-18 export 'openBlock' (imported as 'openBlock') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 250:26-44 export 'createElementBlock' (imported as 'createElementBlock') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 250:45-53 export 'Fragment' (imported as 'Fragment') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 250:61-71 export 'renderList' (imported as 'renderList') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 251:17-26 export 'openBlock' (imported as 'openBlock') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 251:30-48 export 'createElementBlock' (imported as 'createElementBlock') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 252:19-33 export 'normalizeClass' (imported as 'normalizeClass') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 255:12-30 export 'createElementVNode' (imported as 'createElementVNode') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 255:36-46 export 'mergeProps' (imported as 'mergeProps') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 258:15-25 export 'toHandlers' (imported as 'toHandlers') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 259:14-29 export 'createTextVNode' (imported as 'createTextVNode') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 259:30-45 export 'toDisplayString' (imported as 'toDisplayString') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 260:56-65 export 'openBlock' (imported as 'openBlock') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 260:69-87 export 'createElementBlock' (imported as 'createElementBlock') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 260:124-142 export 'createCommentVNode' (imported as 'createCommentVNode') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 264:68-77 export 'openBlock' (imported as 'openBlock') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 264:81-99 export 'createElementBlock' (imported as 'createElementBlock') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 266:17-31 export 'normalizeClass' (imported as 'normalizeClass') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 268:10-28 export 'createElementVNode' (imported as 'createElementVNode') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 268:34-44 export 'mergeProps' (imported as 'mergeProps') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 273:13-23 export 'toHandlers' (imported as 'toHandlers') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 274:12-22 export 'renderSlot' (imported as 'renderSlot') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 279:17-35 export 'createCommentVNode' (imported as 'createCommentVNode') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.es.js 280:16-34 export 'createCommentVNode' (imported as 'createCommentVNode') was not found in 'vue' (possible exports: default)

webpack compiled with 43 warnings

I'm having trouble with paging not working.

Laravel Framework 5.8.38 [email protected] └─┬ [email protected] The paging itself is displayed.

controller

  public function index()
    {
        return TelephoneNumbers::paginate(50);
        
    }

routing Route::middleware('api')->get('/tele', '[email protected]'); vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Laravel vue pagination - codechief.org</div>
 
                    <div class="card-body">
                        <ul>
                            <li v-for="tag in laravelData.data" :key="tag.id">{{ tag.subscriber_number }}</li>
                        </ul>
                        <pagination :limit=10 :data="laravelData" @pagination-change-page="getResults"></pagination>
 
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
 
<script>
  export default {

	data() {
		return {
			// Our data object that holds the Laravel paginator data
			laravelData: {},
		}
	},

	mounted() {
		// Fetch initial results
		this.getResults();
	},

	methods: {
		// Our method to GET results from a Laravel endpoint
		getResults(page = 1) {
			axios.get('https://domain/api/tele?page=' + page)
				.then(response => {
					this.laravelData = response.data;
				});
		}
	}

}
</script>

I'm using laravel paginate

$data = DB::table('posts')->paginate(30);

and passing to the laravel component as a json object.

<pagination :data="data"> </pagination>

The pagination displays correctly even when I change manually the $_GET['page'] parameter on the URL but the links are not displaying.

I've just released a v3 beta of this plugin which is a re-write for Vue 3. Please see the latest releases and install using [email protected]. The code and REAMDE are available in the v3 branch.

I'd appreciate it if you could help test the beta and share any feedback you have in this issue.

1. installed via npm i laravel-vue-pagination

2. created a file under plugins folder as "laravel-vue-pagination.js"

import Vue from 'vue'
import LaravelVuePagination from 'laravel-vue-pagination'

Vue.use('laravel-vue-pagination', LaravelVuePagination)

3. registered in nuxt.config.js under plugins array '~/plugins/laravel-vue-pagination'

4. using in page as follows <LaravelVuePagination :data="users" @pagination-change-page="getResults"></LaravelVuePagination>

5. Getting error Cannot create property 'nuxt_external_installed' on string 'laravel-vue-pagination'

The main error is:

laravel-vue-pagination.es.js?1467:35 
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'meta')
    at Proxy.isApiResource (laravel-vue-pagination.es.js?1467:35:1)

In Laravel 8 ^ and Vue3 the tag/parameter meta was removed, so in this case, I only check if exist the element, but you can check first if in the different versions work this check of this.data.meta.

Bumps minimist from 1.2.5 to 1.2.6.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.