How to set a base url for useFetch globally once

[nlvedwin]

so i wanted to use useFetch for my laravel API and i wanted to set the base url to the laravel’s url how i can set the base url once? just like in nuxt2 for axios module

[zhoutengshen]

$fetch.create

[frbuceta]

I like this definition better but it doesn't work for me in a composable.

export default $fetch.create({
  baseURL: 'https://xxxxxxxxx.run.app',
  headers: {
    // eslint-disable-next-line quote-props
    // 'Authorization': `Bearer ${token.value}`
  }
})

$fetch is not defined

[nlvedwin]

how about the useFetch?

[danielroe]

In that case you can create a wrapper composable:

import type { UseFetchOptions } from '#app'
const useMyFetch = (url: string, options: UseFetchOptions<unknown>) => useFetch(url, { baseURL: 'https://my.api/', ...options })

[danielroe]

Updated.

[nlvedwin]

wow thank you dan!👏👏

in the future it would be awesome if there’s an option in the nuxt config to set the api base url that would be cool!

another option would be adding proxy

[danielroe]

There is an option - app.baseURL - but note that it changes the entire baseURL of your app, which may not be what you mean. (And $fetch/useFetch need to stay in sync with your app so you can't set this option to your laravel api.)

[lucassimines]

@danielroe how to keep the typing on wrapper function?

I'm trying the following:

useApiFetch<Page[]>('/pages')

But the wrapper function doesn't recognize my response type Page[]

The error:

(alias) interface Page
import Page
Expected 0 type arguments, but got 1.ts(2558)

[peterkimzz]

Hi @danielroe, your solution works for me. Thanks!
But, I have a quick question. When I use the wrapped composable in server-side hook, nuxt3 said

[Vue warn]: onServerPrefetch is called when there is no active component instance to be associated with. 
Lifecycle injection APIs can only be used during execution of setup(). 
If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

Can I ignore the warning?

[Kingside88]

.env file:
{ API_BASE_URL: https://localhost:7257/ }

composables/useGetFetch.ts:
export const useGetFetch = (url, opts = {}) => { const config = useRuntimeConfig(); return useFetch(url, { ...opts, method: "GET", baseURL: config.API_BASE_URL, credentials: 'omit' }) }
pages/mypage.vue:
`<script setup lang="ts">
let personnels = ref();

const nuxtApp = useNuxtApp()
nuxtApp.hook('page:finish', async () => {
const { data: personnelsData } = await useGetFetch("personnelsAll");
personnels.value = personnelsData.value;
})
</script>`

This works greak.