erikfig/InfiniteScroll.vue

## InfiniteScroll.vue
<template></template>

<script>
export default {
    // propriedades do component
    props: {
        paginationBox: { //pagination-box é o seletor do box com o conteúdo paginado
            required: true // ele é obrigatório
        },
        margin: { // margin define a margem inferior para saber quando carregar mais conteúdo
            default: 0 // é opcional, então o valor padrão é zero
        } // com margin 0, a requisição ajax só dispara quando a rolagem da página encostar no component
    },
    data() {
        return {
            currentPage: 1, // contador de página
            onLoad: false // se estamos carregando conteúdo ou não
        }
    },
    methods: {
        load(url, element) {
          // aqui vamos carregar o conteúdo da próxima página
          // e pegar somente o html do elemento informado em
          // infinite-scroll
        },
        getMore() {
         // vai disparar o método load e adicionar o conteúdo
         // no DOM dinâmicamente
        },
        checkNeedMoreData() {
          // vai verificar se já podemos carregar ou não mais conteúdo
        }
    },
    mounted() {
        // se precisar de mais conteúdo
        if (this.checkNeedMoreData()) {
            // carregamos
            this.getMore();
        }

        // quando rolarmos o scroll da página
        window.addEventListener('scroll', () => {
            // verificamos se precisa de mais conteúdo
            if (this.checkNeedMoreData()) {
                // se precisar, carregamos
                this.getMore();
            }
        });
    }
}
</script>

## users.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul class="paginated-items">
            @foreach ($users as $user)
            <li>{{ $user->name }}</li>
            @endforeach
        </ul>
        <!-- o componente vue, o local que ele fica é importante para definir
            onde o será detectado a rolagem da página para disparar o carregamento
            de novos items da paginação -->
        <infinite-scroll pagination-box=".paginated-items"></infinite-scroll>
    </div>
    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
	<template></template>

	<script>
	export default {
	// propriedades do component
	props: {
	paginationBox: { //pagination-box é o seletor do box com o conteúdo paginado
	required: true // ele é obrigatório
	},
	margin: { // margin define a margem inferior para saber quando carregar mais conteúdo
	default: 0 // é opcional, então o valor padrão é zero
	} // com margin 0, a requisição ajax só dispara quando a rolagem da página encostar no component
	},
	data() {
	return {
	currentPage: 1, // contador de página
	onLoad: false // se estamos carregando conteúdo ou não
	}
	},
	methods: {
	load(url, element) {
	// aqui vamos carregar o conteúdo da próxima página
	// e pegar somente o html do elemento informado em
	// infinite-scroll
	},
	getMore() {
	// vai disparar o método load e adicionar o conteúdo
	// no DOM dinâmicamente
	},
	checkNeedMoreData() {
	// vai verificar se já podemos carregar ou não mais conteúdo
	}
	},
	mounted() {
	// se precisar de mais conteúdo
	if (this.checkNeedMoreData()) {
	// carregamos
	this.getMore();
	}

	// quando rolarmos o scroll da página
	window.addEventListener('scroll', () => {
	// verificamos se precisa de mais conteúdo
	if (this.checkNeedMoreData()) {
	// se precisar, carregamos
	this.getMore();
	}
	});
	}
	}
	</script>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="csrf-token" content="{{ csrf_token() }}">
	<title>Document</title>
	</head>
	<body>
	<div id="app">
	<ul class="paginated-items">
	@foreach ($users as $user)
	<li>{{ $user->name }}</li>
	@endforeach
	</ul>
	<!-- o componente vue, o local que ele fica é importante para definir
	onde o será detectado a rolagem da página para disparar o carregamento
	de novos items da paginação -->
	<infinite-scroll pagination-box=".paginated-items"></infinite-scroll>
	</div>
	<script src="{{ asset('js/app.js') }}"></script>
	</body>
	</html>