Nuxt•2w ago

How to custom baseURL of fetching api as our own?

Hello everyone, can anyone help me about how we can fetching the api without put baseURL everytime we want to get the data. So I don't want to make like this

const { data: products, pending, refresh } = useFetch('/products', {
    baseURL: config.public.apiBase,
    params: {
        search: searchVal.value,
        sort: sortVal.value,
        filter: filterVal.value,
    },
    immediate: true,
    // lazy: false
 })

const { data: products, pending, refresh } = useFetch('/products', {
    baseURL: config.public.apiBase,
    params: {
        search: searchVal.value,
        sort: sortVal.value,
        filter: filterVal.value,
    },
    immediate: true,
    // lazy: false
 })

2 Replies

kapa.ai•2w ago

Hi @Adnan Erlansyah. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To customize the baseURL for your API fetching without specifying it every time, you can create a custom fetch wrapper in Nuxt. Here's how you can do it: 1. First, create a Nuxt plugin to set up a custom $fetch instance:

// plugins/api.ts
export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig()

  const api = $fetch.create({
    baseURL: config.public.apiBase
  })

  return {
    provide: {
      api
    }
  }
})

// plugins/api.ts
export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig()

  const api = $fetch.create({
    baseURL: config.public.apiBase
  })

  return {
    provide: {
      api
    }
  }
})

2. Then, create a custom composable to use this $api instance:

// composables/useAPI.ts
import type { UseFetchOptions } from 'nuxt/app'

export function useAPI<T>(
  url: string | (() => string),
  options?: UseFetchOptions<T>,
) {
  return useFetch(url, {
    ...options,
    $fetch: useNuxtApp().$api
  })
}

// composables/useAPI.ts
import type { UseFetchOptions } from 'nuxt/app'

export function useAPI<T>(
  url: string | (() => string),
  options?: UseFetchOptions<T>,
) {
  return useFetch(url, {
    ...options,
    $fetch: useNuxtApp().$api
  })
}

3. Now you can use this custom useAPI composable in your components without specifying the baseURL each time:

<script setup>
const { data: products, pending, refresh } = useAPI('/products', {
  params: {
    search: searchVal.value,
    sort: sortVal.value,
    filter: filterVal.value,
  },
  immediate: true,
})
</script>

<script setup>
const { data: products, pending, refresh } = useAPI('/products', {
  params: {
    search: searchVal.value,
    sort: sortVal.value,
    filter: filterVal.value,
  },
  immediate: true,
})
</script>

This approach allows you to set the baseURL once and reuse it across your application. The baseURL is set using the runtimeConfig in your nuxt.config.ts file, which can be overridden by environment variables. Source: Nuxt Docs - Custom useFetch (https://nuxt.com/docs/guide/recipes/custom-usefetch#custom-fetch) Remember to set up your runtimeConfig in nuxt.config.ts:

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || '<https://api.example.com'>
    }
  }
})

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || '<https://api.example.com'>
    }
  }
})

Source: Nuxt Docs - Runtime Config (https://nuxt.com/docs/guide/going-further/runtime-config#exposing) This setup allows you to have a clean and reusable way to fetch data from your API without repeating the baseURL in every request. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@1079709612078534676> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

How to custom baseURL of fetching api as our own?