fetch in vue 3

First, import the reactive function from the vue package. This function allows us to create a reactive object.

Create a new function called fetchData which will be responsible for fetching the data from the API. This function should be async to allow for asynchronous operations.

Within the fetchData function, use the fetch function to make a network request to the API endpoint. Pass the URL of the API endpoint as a parameter to the fetch function.

Once the network request is complete, use the json method to parse the response and extract the data. This method returns a promise, so use the await keyword to wait for the promise to resolve.

Create a new variable called data and assign it the parsed data from the response.

Finally, return the data variable from the fetchData function.

In the Vue component where you want to use this data, call the fetchData function and assign the returned value to a reactive property using the reactive function.

Now, you can access the fetched data in your component using the reactive property. Whenever the data changes, the component will automatically update.