Challenge: Utilizing the API Layer

Practice what we’ve learned about the utilization of the API layer.

Problem statement

Many websites need to perform API requests to fetch data, send form data to a server, and so on. Your task is to implement functionality that will fetch and display a list of users.

Challenge

You’re tasked with implementing functionality to fetch and display a list of users from the https://jsonplaceholder.typicode.com/users API. Following the principles of the API layer, you need to create a new API file (userApi.js) that will export a method to fetch a list of users. You can call it fetchUsers. The fetchUsers method should utilize one of the API methods exported from the src/api.js file. This method should then be used in the src/components/DisplayUsers.vue component to fetch and display a list of users when the DisplayUsers component is created.

This exercise should be solved with Vue 3’s Options API.

Get hands-on with 1200+ tech skills courses.