How to Use Environment Variables in Axios within Nuxt3 Composables

Question

I am currently working with Axios in a Nuxt 3 project and I'm facing an issue with using environment variables within an api.js file located under the composables directory. Here is my project directory structure:

├───nuxt.config.ts
├───composables
│   ├───api.js
├───pages
│   ├───signup.vue
├───.env
├───.env.dev

Contents of .env:

NUXT_BASE_URL = "/"
NUXT_API_BASE = "https://localhost:8000"

Contents of .env.dev:

NUXT_BASE_URL = "/"
NUXT_API_BASE = "https://localhost:8000"

nuxt.config.ts:

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBase: process.env.NUXT_API_BASE ?? "http://localhost:8000",
    },
  },
  env: {
    apiBase: process.env.NUXT_API_BASE ?? "http://localhost:8000",
  },
})

composables/api.js ( which I learn from how to use env variables in nuxt 3 outside of setup scripts):

import axios from 'axios';

let instance = null;

export const useAxiosInstance = () => {
    const { NUXT_API_BASE } = useRuntimeConfig();
    const config = useRuntimeConfig();

    if (!instance) {
      instance = axios.create({
        baseURL: NUXT_API_BASE,
        headers: { "Content-Type": "application/json" },
        timeout: 5000
      });

      instance.interceptors.response.use(response => {
        return response.data;
      });
    }

    return instance;
};

const userRequest = useAxiosInstance();

export const apiSignup = data => {
    return userRequest.post('/signup', data)
        .then(() => {})
        .catch(() => {})
};

However, when I run npm run dev and check my /pages/signup.vue, I consistently encounter a 500 error message:

500
[nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at https://nuxt.com/docs/guide/concepts/auto-imports#using-vue-and-nuxt-composables.
at Module.useRuntimeConfig (./node_modules/nuxt/dist/app/nuxt.js:192:27)
at useAxiosInstance (./composables/api.js:22:58)
at ./composables/api.js:40:21
……

What should I do to resolve this error?

Answer 1

I can see some issues in your code:

1. .env / .env.dev ( remove "" )

NUXT_BASE_URL = /
NUXT_API_BASE = https://localhost:8000

2. nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBase: process.env.NUXT_API_BASE
    },
  },
})

3.in order to access it

// ...

const config = useRuntimeConfig()

// ...

instance = axios.create({
        baseURL: config.public.apiBase, // you can access it like this
        headers: { "Content-Type": "application/json" },
        timeout: 5000
      })