Nuxt 3 has been out for about and a month now. But for many web programmers, they probably have not had the opportunity or still have many doubts that they do not want to apply for their projects. During the time of applying nuxt 3 to my project, I realized that nuxt 3 really has a lot of advantages. In this article, I want to introduce to everyone a concept and tool that was present in nuxt 2 but has been changed and improved in nuxt 3. That is data fetching. Data fetching in nuxt 3 includes: useAsyncData, useLazyAsyncData, useFetch, useLazyFetch. In this part one, I will talk about the two most commonly used tools, useAsyncData and useFetch.
1. useFetch
useFetch is rendered on the server side (in the server side rendering mode of nuxt) and is used to load data into your nuxt application. useFetch can be used in pages, components or plugins. Usage of useFetch is very simple as below:
1 2 3 4 5 6 7 | <script setup> const { data: count } = await useFetch('/api/count') </script> <template> Page visits: {{ count }} </template> |
This is the most basic and simplest use of useFetch, we just need to pass the url into useFetch and we are waiting for the results to return. This usage is quite inconvenient because every time we call the api we have to pass a long URL to useFetch and if this URL is used in many places, it is quite difficult to manage. Usually you will create an api directory and write api calls to the files in it and then import it into the component or page, right? With this approach, you cannot use useFetch, but it’s okay nuxt 3 has provided us with a tool that is useAsyncData which I will talk about shortly. Now back to useFetch. useFetch actually has many uses depending on the case. According to the manufacturer’s docs, the structure of useFetch should look like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | function useFetch( url: string | Request | Ref<string | Request> | () => string | Request, options?: UseFetchOptions<DataT> ): Promise<AsyncData<DataT>> type UseFetchOptions = { key?: string method?: string query?: SearchParams params?: SearchParams body?: RequestInit['body'] | Record<string, any> headers?: { key: string, value: string }[] baseURL?: string server?: boolean lazy?: boolean immediate?: boolean default?: () => DataT transform?: (input: DataT) => DataT pick?: string[] watch?: WatchSource[] } type AsyncData<DataT> = { data: Ref<DataT> pending: Ref<boolean> refresh: (opts?: { dedupe?: boolean }) => Promise<void> execute: () => Promise<void> error: Ref<Error | boolean> } |
Basically useFetch requires a url and options may or may not. Options include:
- method: The method of request.
- query: Add queries for request
- params: Alias for query
- body: Request body.
- headers: Request headers.
- baseURL: Base URL.
- key: a unique key to ensure that data fetching can be properly de-duplicated between requests, if not provided, this key will be generated based on the location of the static code used by useAsyncData use (this you notice because you don’t add or get cached when you switch pages because nuxt doesn’t call back the api. To solve this problem, you use clearNuxtData to clear the data of that key).
- server: Whether to fetch data on the server (default is true).
- default: An initial function to set the default value of data, before the asynchronous function resolves – especially useful when you leave lazy as true .
- pick: Selects only the keys specified in this array from the function result.
- watch: Listen for the change of some object to call back useFetch (this is used for watch route query, it is also quite convenient to set watchQuery: true like nuxt 2).
- transform: Used to transform the output.
- immediate: When set to false, will prevent request to trigger useFetch immediately. (default is true) Values returned by useFetch:
- data: The data that useFetch calls from the api.
- pending: whether useFetch is still called (true/false).
- refresh/execute : the refresh or execute function can be called outside of useFetch which is used to fetch the data again.
- error: object error in case the api call fails Here is a small example using some of the options above:
1 2 3 4 5 6 | const { data, pending, error, refresh } = await useFetch('https://api.nuxtjs.dev/mountains',{ pick: ['title'], query: { param1, param2: 'value2' } }) const refreshData = () => refresh() |
This usage will return the title of the elements in the array returned from the url as ” https://api.nuxtjs.dev/mountains?param1=value1¶m2=value2 ” and we can call useFetch again via refreshData function
2. useAsyncData
I’ve talked about useFetch just now and have mentioned a small inconvenience of it. To overcome this inconvenience we use useAsyncData. Usage of useAsyncData is similar to useFetch as follows:
1 2 3 4 5 6 7 | <script setup> const { data } = await useAsyncData('count', () => $fetch('/api/count')) </script> <template> Page visits: {{ data }} </template> |
Suppose we have a function:
1 2 | export const getPost = () => axios.get('/api/get-post-in-viblo') |
To use in useAsyncData, we just need to change it to:
1 2 | const { data } = await useAsyncData('count', () => getPost()) |
Basically useAsyncData is different from useFetch in that point. As for the structure, useAsyncData and useFetch are quite similar:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | function useFetch( url: string | Request | Ref<string | Request> | () => string | Request, options?: UseFetchOptions<DataT> ): Promise<AsyncData<DataT>> type UseFetchOptions = { key?: string method?: string query?: SearchParams params?: SearchParams body?: RequestInit['body'] | Record<string, any> headers?: { key: string, value: string }[] baseURL?: string server?: boolean lazy?: boolean immediate?: boolean default?: () => DataT transform?: (input: DataT) => DataT pick?: string[] watch?: WatchSource[] } type AsyncData<DataT> = { data: Ref<DataT> pending: Ref<boolean> refresh: (opts?: { dedupe?: boolean }) => Promise<void> execute: () => Promise<void> error: Ref<Error | boolean> } |
The options in useAsyncData are the same as in useFetch. There is a small note when using useAsyncData or useFetch that you remember to add keys for them and remember to clearNuxtData if you want useAsyncData or useFetch to be called again when we switch pages. For example like this:
1 2 3 4 5 | <script setup> await clearNuxtData('count') const { data } = await useAsyncData('count', () => $fetch('/api/count')) </script> |
Above I have introduced two data fetching tools in nuxt 3, useAsyncData and useFetch. There is still useLazyAsyncData and useLazyFetch, which I will leave in the next section. In the process of writing my article, it is inevitable that there will be mistakes, I hope to receive comments from everyone. Finally, thank you for taking the time to watch, hope my sharing will be of some help to those of you who are learning about nuxt 3.