Data Fetching ​

We provide custom solution from your data fetching needs. In most of the case, we generally configure the fetching configuration like adding base URL for all of our API calls, setting headers, setting interceptors for Authentication, etc.

Custom Fetching ​

Problem ​

Assume, we created API endpoint for users and it's available at /users endpoint. Then, We had to make API call like this:

const { data } = await useFetch('https://localhost/api/users')

However, we have to repeat https://localhost/api for all of our API calls 😔

Solution ​

With our template, You will get useApi & $api that is pre-configured with common configuration for data fetching.

useApi is configured version of:

• For Vue template => VueUse's useFetch & ofetch
• For Nuxt template => Nuxt's useFetch & their $fetch

With our custom configuration, You can use useApi list a usual useFetch composable:

// No need to repeat `https://localhost/api` now
const { data } = await useApi('/users')

Recommendation ​

First of all, We recommend you check out how to use fetch to make API calls.

After that,

• For Vue template, Check out the useFetch composable documentation and understand the various options it provides.
• For Nuxt template, Checkout their docs on Data Fetching and useFetch.

useApi vs $api ​

If you have checked our source code then you might notice that we used useApi & $api together.

For Nuxt,

Nuxt developers already knows the difference between useApi (useFetch under the hood) & $api ($fetch under the hood).

For Vue,

We initially decided to use $api(a custom instance of ofetch) for data fetching due to the following reasons.

1. Efficient JSON Parsing: $api intelligently parse JSON and native values from responses.
2. Error Handling: It automatically triggers error handling when response.ok is false, providing users with clear error messages and concise stack traces for quick issue resolution.

However, when it comes to the initial data fetching, we found that useFetch offers distinct advantages. It enables us to effortlessly refresh data when the URL changes.So, We have created useApi as a custom instance of useFetch from VueUse library.This provides Vue users the flexibility to choose between useApi and $api based on their specific needs.

However vue user have flexibility to choose any of the useApi and $api for data fetching, but we recommend to use useApi for initial data fetching and $api for fetching data on the interactions like update, delete.