Nuxt3でFirebase 9を導入したがリロードを行うとエラーが起きました。

Nuxt3がstableになったので早速触ってみました。まずはFirebaseを導入するところから始めましたが、結構序盤で躓きました。

Nuxt3の公式ページ

Nuxt: The Intuitive Vue Framework

Firebase 9公式ドキュメント

バージョン8からモジュラーWebSDKにアップグレードします  |  Firebase

参考にしたドキュメント

Nuxt3でFirebase Auth v9を使ってみる - くらげになりたい。

Nuxt3 & Firebase9でFirebase Authentication決定版

FirebaseとNuxtのバージョン

"firebase": "^9.16.0",
"firebase-admin": "^11.4.1",
"firebase-functions": "^4.1.1",
"firebase-functions-test": "^3.0.0",
"nuxt": "^3.1.1",

firebase.client.tsを追加してFirebase authとFirebase Firestoreにアクセスできる形になりましたが、リロードを行うと以下のようなエラーが発生し困っていました。

firebase: need to provide options, when not being deployed to hosting via source. (app/no-options)

firebase: need to provide options, when not being deployed to hosting via source. (app/no-options)

runtimeConfigを使用して環境変数にアクセスしてAPI情報を共有しているのですが、authとFirestoreと使用するページにてリロードをすると上記のエラーが出ました。

解決策

firebase.client.tsの.clientを除いたファイル名：firebase.tsにするとエラーが解消されました。他の記事や公式ドキュメントを見ても解決策がなかったので、今回はNoteにまとめてみました。
同じエラーが出ている人がいれば役に立てば幸いです。