Accessing environment variables in composables in Nuxt3: a guide

Question

In my nuxt 3 application, in order to get data, I want to set a base URL for all API calls. When I get this baseURL from environment variable. How to set baseURL?

I twist with composable useFetch but then I can't get the baseURL because useRuntimeConfig() is not accessible there.

// My composables function
const baseURL = "how to get baseURL from process.env";

export const myFetch = async (url: string) => {
  const options = {
    baseURL: baseURL,
  };

  return await useFetch(url, options);
}

Answer 1

You can access the runtime configuration by doing this

export default () => {
  const config = useRuntimeConfig()

  console.log(config)
}

As shown below: https://github.com/nuxt/framework /discussions/3215#discussioncomment-3088206