Nuxt 3 fetch baseurl org/' }) Example: To add global interceptors, we'll build a custom composable wrapper around $fetch. ). Fetch data from an API endpoint with an SSR-friendly composable. An absolute URL to serve the public folder from (production-only). As a foundation, let's use the same project from my previous blog post on Authentication in Nuxt 3. It automatically generates a key based on URL and fetch options, provides type hints for request url based on server routes, and infers API response type. Let's pretend here that: const { session } = useUserSession() const api = $fetch. ) How do I set the baseUrl that is used in the useFetch composable globally (maybe nuxt. Then, you can access this new base URL using config. (And $fetch / useFetch need to stay in sync with your app so you can't set this option to your laravel api. org/api/composables/use-runtime-config and give an environment variable There is an option - app. You can define the baseURL in your nuxt. baseURL - but note that it changes the entire baseURL of your app, which may not be what you mean. How do I set the baseUrl that is used in the useFetch composable globally (maybe nuxt. baseURL: https://nuxt. $fetch is a configured instance of ofetch which supports adding the base URL of your Nuxt server as well as direct function calls during SSR (avoiding HTTP roundtrips). This is especially valuable when your API calls consistently need authorization headers. create ({baseURL: '/api'}) // Use it as if it was $fetch const {data, pending, errors, refresh} = await apiFetch ('/test') // Same as $fetch('/test', { baseURL: '/api' }) By default, the baseURL is set to '/'. create({ // Create a fetch object with a baseURL already setup const apiFetch = $fetch. com/docs/api/composables/use-runtime-config#appbaseurl. baseURL is part of the UseFetchOptions. js|ts like this: // runtimeConfig: { public: { baseURL: '/prefix/' }) Example: The folder name for the built site assets, relative to baseURL (or cdnURL if set). ts)? How can I avoid defining it in every useFetch? You could probably put it into a composable and import it from there with your wished defaults. For example: Example: app: { cdnURL: 'https://mycdn. nuxtjs. However, the baseURL can be updated at runtime by setting the NUXT_APP_BASE_URL as an > environment variable. import { ofetch } from 'ofetch' // Nuxt uses ofetch to expose globally the $fetch helper for making HTTP requests within your Vue app or API routes. This composable provides a convenient wrapper around useAsyncData and $fetch. This is set at build time and should not be customized at runtime. You use https://v3. config. create({ // set options }) export default defineNuxtPlugin(async (nuxtApp) => { const customFetch = async (request, options) => { const baseURL = process. const fetcher = ofetch. app. server ? Let's create a custom $fetch instance with a Nuxt plugin. lpdqt nbflq bbhurz gpq hoo dskwja smkkr izxvso pjumhh brtq