#23 - HTTP Requests (with Fetch API) - Vue 3 (Options API) Tutorial

In this Vue 3 tutorial, we learn how to use the Javascript Fetch API in Vue for HTTP requests. We cover how to get, post, update and delete data with a fake REST API. We also cover the differences between PUT and PATCH.

We cover the following topics:
1. What is the Fetch API
2. What is JSONPlaceholder
3. The fetch method
4. How to receive data with GET
5. How to get multiple items in a data set
6. How to fetch data on page load
7. How to send data with POST
8. Updating data: PUT and PATCH
9. How to update all set data with PUT
10. How to partial update set data with PATCH
11. PUT vs PATCH: Which one to use when
12. How to delete data with DELETE

_Note that this tutorial is for the Vue 3 Options API (which is similar to Vue 2). We later move on to the Composition API and then the Script Setup (3.2 update)_

This lesson is also available in written format

PUT vs PATCH

Check out the Vue 3 for Beginners playlist for more Vue tutorial videos

Subscribe to the channel and never miss a lesson

Visit the website for a wide range of programming tutorials

[rborowski]

9:26 - there is a mistake in request body. You should assign properties of postData object, but you wrote "this.userId" instead of "this.postData.userId"