3tech打ち上げ花火って英語でfireflowerというらしいです。フロントから実行するやってみた的な書き方なら以下の記事が参考になります。(一つのcomposableに初期化もメソッドも含めているので、コレクションがusersとproductsなど複数になってくると書ききれません)https://zenn.dev/ramo798/articles/5707ce0c2bff9eもうちょい実用的なら、以下の記事が参考になります。https://github.com/nuxt/framework/discussions/2404上記の方法では、Nuxtのフォルダに以下のように役割を分担させています。initを記述、useStateでfirebase情報を格納します。composableにデータ取得やログイン関係のメソッドを記述しpagesや各componentでメソッドを利用します。欠点としては、ページ読み込みの時にusersを表示させようとするとエラーとなります。CollectionReference・・・フロントで実行する方法クリックで表示plugins/firebase.client.tspluginsのファイルにclientをつけることで、クライアントサイドでのみ動作します。firestoreやauthを使うには、firebaseappで初期認証したオブジェクトが必要です。初期化処理は全てpluginsで行うのがシンプルです。初期化処理が完了したauthやdbはuseStateに格納して、composableから使えるようにしています。useStateに格納することで、各コンポーネントから共通して使えるようになります。useFirestore.ts各コンポーネントからはcomposableの関数や状態変数にアクセスします。composableの関数は全てPromiseを返すようにしていますので、例えば書き込み成功の場合は”success”というresが返されますし、失敗の場合は”failure”というresが返されます。それぞれのresに対して何をするか(メッセージ表示やページ遷移など)といった結果に応じたアクションはコンポーネント内に書いた関数に記述します。};};appapp.vuenuxt2ではlayoutsにレイアウトを記述していました。nuxt3でもlayoutsは使えるのですが、layouts/default.vueしか置かない場合はわざわざ作らなくてもapp.vueで代用できます。ログインしているかしていないかでメインコンテンツ部分の表示をv-ifで変えています。'ログアウトに失敗しました。'ログアウトに失敗しました。nuxt/frameworkサーバーから実行する解決法としては、データ取得やログイン関係のメソッドをcomposableではなくserver/apiに格納します。これにより、各コンポーネントからはuseFetchでデータ取得ができるようになります。これを使った書き方については、別記事で作成しています。設計概要firebaseの関数はサーバー側で実行します。servers/apiにfirebaseの初期化処理や各コンポーネントで利用する関数を配置します。各コンポーネントからはuseFetchでデータを取得できます。※以下リンクで紹介されている方法とほとんど同じですhttps://enterflash.io/posts/connect-to-firestore-db-using-admin-sdk-nuxt-3--firebase※firebaseの処理をフロント側で実行する方法もあります。フロント側で実行する方法では、ページ読み込み時にdbオブジェクトを利用する方法を確立できなかったため、今の私はサーバー側で実行する方法をとっています。https://zenn.dev/yuta_enginner/articles/f2eb0d4f36dfc7フロント側で実行する方法ではSDKでconfig({apiKey:~~~,authDomain:~~~と書いてあるやつ)でinitializeAppを実行できましたが、サーバー側で実行する方法では秘密鍵でinitializeAppを実行します。SDKで実行できないので注意。ツイートYuta趣味でエンジニアやってます。web系(nuxt3やGAS使い)でしたが、最近は組み込み系に軸を移してきています。約13,100字Yuta趣味でエンジニアやってます。web系(nuxt3やGAS使い)でしたが、最近は組み込み系に軸を移してきています。instagram.com/yuta_as_engineer?igshid=YmMyMTA2M2Y目次フロントから実行するフロントで実行する方法サーバーから実行する設計概要Zennエンジニアのための情報共有コミュニティAboutZennについて運営会社お知らせ・リリースGuides使い方Publicationよくある質問LinksTwitterGitHubメディアキットLegal利用規約プライバシーポリシ。