To set the baseURL in your nuxt.config.js|ts, you can follow this example:

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  // ...
  runtimeConfig: {
    public: {
      baseURL: process.env.BASE_URL || 'https://api.example.com/',
    },
  },
  // ...

(Alternatively, you can use a fixed value or solely rely on the environment variable)

In addition, include this composable:

// /composables/useMyFetch.js

export const useMyFetch = (request, opts) => {
  const config = useRuntimeConfig()

  return useFetch(request, { baseURL: config.public.baseURL, ...opts })
}

If you prefer type safety, consider implementing it like so:

// /composables/useMyFetch.ts

export const useMyFetch: typeof useFetch = (request, opts?) => {
  const config = useRuntimeConfig()

  return useFetch(request, { baseURL: config.public.baseURL, ...opts })
}

This will allow you to utilize useMyFetch instead of useFetch with the specified baseURL configuration :-)

A potential solution could involve utilizing the following composable
/composables/useJsonP.ts

export const useJsonP = async (path) => {
  return await useFetch(() => `https://jsonplaceholder.typicode.com/${path}`)
}

This can be implemented in your view like so:

<script setup>
const jsonP = await useJsonP('todos/1')
</script>

<template>
  <div>
    <pre>{{ jsonP.data }}</pre>
  </div>
</template>

By taking this approach, there is no need to manually define and configure the functionality elsewhere. This provides a straightforward method for creating reusable code snippets that can be easily imported into your components/views using Nuxt's DX capabilities.

If you're aiming to implement this functionality in Typescript, consider inferring the parameters from useFetch to avoid making changes to your code if there are adjustments within Nuxt.

Customize your base URL based on your environment settings

As mentioned by others, start by setting your base URL in the public section of your runtime configuration:

// nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  // ...
  runtimeConfig: {
    public: {
      baseURL: process.env.BASE_URL || 'https://api.example.com/',
    },
  },
  // ...

Encapsulate useFetch within a custom composable

The definition of useFetch involves various type variables and overloads, with valid options for the argument changing depending on the types of requests/results passed to it. This complexity makes accurate re-typing challenging.

In addition, even if we manage to re-type it accurately, any modifications to the definition will render our wrapper ineffective. Fortunately, there's a straightforward solution. Adopt the type of useFetch and apply it again:

// composables/useAPIFetch.ts

import { useFetch } from "#app"

type useFetchType = typeof useFetch

// adapt useFetch with necessary configurations to communicate with our API
export const useAPIFetch: useFetchType = (path, options = {}) => {
  const config = useRuntimeConfig()

  // adjust options as required
  options.baseURL = config.public.baseUrl
  return useFetch(path, options)
}

It's crucial not to redefine any type variables, parameter argument types, or return types explicitly since we're borrowing all of them from the type of useFetch.

Integrate your new composable

Implement it in your page / component to ensure proper handling of types:

// components/Foo.vue

const { data, error, pending } = await useAPIFetch<ResultsType>("/my-path", { 
  method: "POST",
  body: data,
  ...
})

You can incorporate the use of .env in the following manner:

within your .env file:

NUXT_PUBLIC_BASE_URL = https://www.anotherapi.com

inside your nuxt.config.js/ts file:

runtimeConfig: {
 
    public: {
      BASE_URL: 'some default value',
    },
  },

as specified in the documentation, BASE_URL will automatically be replaced by NUXT_PUBLIC_BASE_URL

(no need to utilize process.env.NUXT_PUBLIC_BASE_URL)

and within a composable, you can implement:

const configuration = useRuntimeConfig();

console.log('the base URL is', configuration.baseUrl)

One way to optimize code is by creating a $fetch instance that can be reused when creating a new composable. Here's an example of how to create a $fetch instance:

// Set up a fetch object with a predefined baseURL
const apiFetch = $fetch.create({ baseURL: '/api' })

// Use it just like $fetch
const {data, pending, errors, refresh} = await apiFetch('/test') // This is equivalent to $fetch('/test', { baseURL: '/api' })

For more information, visit: https://github.com/nuxt/nuxt/discussions/15930

To implement custom fetching in your Nuxt application, you need to make some configurations.

runtimeConfig: {
    public: {
        baseURL: process.env.BASE_URL || 'https://yourBaseURL.com/',
    },
}

In the `composables` directory, create a new file and add the following code:

export const useCustomFetch = (request , opts) =>{
    const config = useRuntimeConfig()
    return useFetch(request,{
        baseURL:config.public.baseURL,
        onRequest({ request, options }) {
            // Set the request headers
        },
        onRequestError({ request, options, error }) {
            // Handle the request errors
        },
        onResponse({ request, response, options }) {
            // Process the response data
            return response._data
        },
        onResponseError({ request, response, options }) {
            // Handle the response errors
        },
        ...opts})
}

You can now utilize this composable wrapper in your components. This composable also includes an interceptor feature for additional functionality.