Search⌘ K

Fetching Data with useFetch and Matching HTTP Methods

Explore how to use the useFetch composable in Nuxt 3 to retrieve data and extend its functionality by specifying HTTP methods. Understand handling different request types on the server side by detecting methods in a single API file or using separate files for each. This lesson teaches managing data operations such as creating, updating, and deleting via API routes.

When requesting data from our server so far, we have used the $fetch helper:

Javascript (babel-node)
const data = await $fetch('/api/posts')

The useFetch composable

We can also use other Nuxt data-fetching composables including useFetch():

Javascript (babel-node)
const data = await useFetch(
"/api/posts"
);

This will also fetch the data from the provided URL. Behind the scenes, useFetch is a wrapper around the $fetch helper and useAsyncData.

Changing the HTTP method

We can also ...