How to access Nuxt 3 runtimeConfig in service file?

Question

I have service file like this .

service/http.ts

import axios from 'axios'
const config = useRuntimeConfig()

const http = axios.create({
    baseURL: config.public.apiUrl,
})
export default http

and nuxt.config.js like this

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiUrl: 'some value',
    }
  },
});

and .env like this

NUXT_API_URL=http://www.a.com/

and I want to access apiUrl here .

But it gives me an error.

also if I use process.env.NUXT_API_URL .

it gives an error again

so, how can I access env variable for my services file?

I'd recommend to use composables. And give `fetch` a try over `axios`. — some-user, Sep 17 '22 at 19:36
E.g. https://stackoverflow.com/questions/72041740/how-to-set-global-api-baseurl-used-in-usefetch-in-nuxt-3 — some-user, Sep 18 '22 at 17:51

score 0 · Answer 1 · answered Sep 17 '22 at 21:29

0

Hm, I'm not sure but you may try that one.

import axios from 'axios'

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

  axios.create({
    baseURL: config.public.apiUrl,
  })
}

useRuntimeConfig() needs to be called inside of the function.

answered Sep 17 '22 at 21:29

kissu

score -1 · Answer 2 · answered Mar 27 '23 at 10:21

your .env file should like this

BASE_URL= "http://www.a.com/"

and your nuxt.config like this

runtimeConfig: {
    public: {
      BASE_URL: process.env.BASE_URL,
    }
},

then add this to your service file

import axios from 'axios'

const http = axios.create({
    baseURL: useRuntimeConfig().BASE_URL,
})
export default http

2 Answers2