Implementing infinite scrolling

Infinite scrolling is a fine example of what you can do with Vue and AJAX. It is also quite popular and can improve interaction for some kind of content. You will build a random word generator that works with infinite scrolling.

Getting ready

We will use Axios. Take a look at the Sending basic AJAX requests with Axios recipe to know how to install it and its basic functionality. Other than that, you don't need to know much to follow along.

How to do it...

To make our app work, we will ask random words from the http://www.setgetgo.com/randomword/get.php endpoint. Every time you point the browser at this address, you will get a random word.

The whole page will consist solely of an infinite list of words. Write the following HTML:

<div id="app"> 
  <p v-for="word in words">{{word}}</p> 
</div>

The list of words needs to grow as we scroll down. So we need two things: understanding when the user reaches the bottom of the page, and getting new words...