Trying to setup firebase for my Vue 3 walkie-talkie project - firebase

Question

It seems some features of the Vuefire SDK have been deprecated, so it keeps throwing errors. This is my Repo & these are some of the error messages.
Browser console error
WARNING Compiled with 3 warnings 2:29:56 PM
warning in ./src/App.vue?vue&type=script&lang=js
export 'auth' (imported as 'auth') was not found in './firebase' (possible exports: default, storage)
warning in ./src/firebase.js
export 'default' (imported as 'firebase') was not found in 'firebase/app' (possible exports: FirebaseError, SDK_VERSION, _DEFAULT_ENTRY_NAME, _addComponent, _addOrOverwriteComponent, _apps, _clearComponents, _components, _getProvider, _registerComponent, _removeServiceInstance, deleteApp, getApp, getApps, initializeApp, onLog, registerVersion, setLogLevel)
warning in ./src/main.js
export 'default' (imported as 'Vue') was not found in 'vue' (possible exports: BaseTransition, Comment, EffectScope, Fragment, KeepAlive, ReactiveEffect, Static, Suspense, Teleport, Text, Transition, TransitionGroup, VueElement, assertNumber, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compatUtils, compile, computed, createApp, createBlock, createCommentVNode, createElementBlock, createElementVNode, createHydrationRenderer, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, defineAsyncComponent, defineComponent, defineCustomElement, defineEmits, defineExpose, defineProps, defineSSRCustomElement, devtools, effect, effectScope, getCurrentInstance, getCurrentScope, getTransitionRawChildren, guardReactiveProps, h, handleError, hydrate, initCustomFormatter, initDirectivesForSSR, inject, isMemoSame, isProxy, isReactive, isReadonly, isRef, isRuntimeOnly, isShallow, isVNode, markRaw, mergeDefaults, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, stop, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, transformVNodeArgs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useSSRContext, useSlots, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withMemo, withModifiers, withScopeId)
App running at:
Local: http://localhost:8080/
Network: http://192.168.0.154:8080/
Cli error
app.js:160 Uncaught TypeError: Cannot read properties of undefined (reading 'storage')
at eval (firebase.js?67d8:28:1)
at ./src/firebase.js (app.js:41:1)
at __webpack_require__ (app.js:157:33)
at fn (app.js:390:21)
at eval (index.js??clonedRule…script&lang=js:2:67)
at ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=script&lang=js (app.js:19:1)
at __webpack_require__ (app.js:157:33)
at fn (app.js:390:21)
at eval (App.vue?vue&type=script&lang=js:5:206)
at ./src/App.vue?vue&type=script&lang=js (app.js:85:1)
eval # firebase.js?67d8:28
./src/firebase.js # app.js:41
__webpack_require__ # app.js:157
fn # app.js:390
eval # index.js??clonedRule…pe=script&lang=js:2
./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=script&lang=js # app.js:19
__webpack_require__ # app.js:157
fn # app.js:390
eval # App.vue?vue&type=script&lang=js:5
./src/App.vue?vue&type=script&lang=js # app.js:85
__webpack_require__ # app.js:157
fn # app.js:390
eval # App.vue:3
./src/App.vue # app.js:74
__webpack_require__ # app.js:157
fn # app.js:390
eval # main.js:3
./src/main.js # app.js:52
__webpack_require__ # app.js:157
(anonymous) # app.js:1278
__webpack_require__.O # app.js:203
(anonymous) # app.js:1279
(anonymous)
I've searched online & it seems to be a version problem (my guess). However when I try to install firebase versions 8 and below it throws up some brand new errors. I've set up my firebase config with all my details on the firebase.js file in my repo.
I'm just trying to connect my firebase with my application and test to ensure it works. I'd really appreciate any help.