Nuxt instance unavailable when trying to run useRuntimeConfig in a file within utils directory during server side rendering (SSR)

I'm building a website in Nuxt 3 for frontend with SSR, and Laravel in the backend. In the Nuxt 3 project, I have an ApiBridge.js file in the utils directory that I use to organize API calls, set the base URL etc. Since starting the project, I've been running this with server side rendering turned off for my convenience, but when I try to run this with SSR on (Turned on in nuxt.config.js), I get a "Nuxt instance unavailable" error. I'm working on this project while learning Nuxt 3 on the go, so I might be missing something obvious.

import axios from "axios";

const runtimeConfig = useRuntimeConfig()

const api = axios.create({
    baseURL: runtimeConfig?.API_BASE_URL,
    withCredentials: true,
});


const apiBridge = {
    login: (info) => api.post('/login', {
        ...info,
    }),

    register: (info) => api.post('/register', {
        ...info,
    })

    /* .... */
}

export default apiBridge;

Why is this happening? Is this a bad way to do this? How to fix it? Why's it working with SSR turned off? Is it because of the auto imports? Thanks in advance!

Looked around the web but found nothing useful.

EDIT: nuxt.config.js as requested by a comment

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    modules: [
        '@nuxtjs/tailwindcss',
        [
            '@pinia/nuxt',
            {
                autoImports: [
                    // automatically imports `defineStore`
                    'defineStore', // import { defineStore } from 'pinia'
                    // automatically imports `defineStore` as `definePiniaStore`
                    ['defineStore', 'definePiniaStore'], // import { defineStore as definePiniaStore } from 'pinia'
                ],
            },
        ],
    ],
    tailwindcss: {
        configPath: './tailwind.config.js'
    },
    build: {

    },
    // ssr: false, // remove later
    runtimeConfig: {
        public: {
            BASE_URL: process.env.BASE_URL,
            API_BASE_URL: process.env.API_BASE_URL,
        }
    },
})

After some back and forth, I ended up moving the apiBridge to the composables directory and changing it to be a Nuxt 3 composable. I assume this is the way it should be done in Nuxt 3. It does look neat, and gets the job done.

import axios from "axios"

export const useApiBridge = () => {
    const runtimeConfig = useRuntimeConfig()

    const api = axios.create({
        baseURL: runtimeConfig.API_BASE_URL,
        withCredentials: true,
    });

    return {   
        login: (info) => api.post('/login', {
            ...info,
        }),

        register: (info) => api.post('/register', {
            ...info,
        })
    }
}

and then in components and other files I use it like

const apiBridge = useApiBridge()