At the time of writing, Vue.js version 3 is in beta. However, that doesn’t mean we can’t start using it. In fact, this the best time to start experimenting with the new API and get ready for the official release.

In this tutorial, we will be building an infinite scroll hook with the new Composition API. we will be creating reactive-data, computed values, and using lifecycle methods. You can find the final code here.

You can use your own server to pull data from or use the one that I have built with Express, you can clone it from GitHub and start it by running:

node app

The API will return a list of users with their avatars that we will infinitely scroll. The response will be:

data.json

{

  "data": [{}],

  "totalPages": 50,

  "page": 1,

  "limit": 10

}

Vue 3 Project Setup

To set up our Vue 3 environment we will generate a new app using the Vue CLI with only Babel and ESLint for simplicity:

vue create infinite-scroll

Then, inside the folder that was generated, we will add the vue-next plugin that will install version 3 beta of vue and change our main.js file implementation:

vue add vue-next

main.js

import { createApp } from 'vue';

import App from './App.vue'

​

createApp(App).mount('#app')

​

We can start the app by running npm run serve and we should see the welcome screen.

#vue #composition-api #vue 3