Nuxt3(SPAモード)でのFireStoreアクセス

FireStoreへのつなげ方。

Nuxt3プロジェクトにて以下を実施。

firebaseツールをインストールし、Initを実行。
login実行するとブラウザ等でログイン動きます。

npm install -g firebase-tools
firebase login
firebase init

initにて以下質問を回答。ほかはデフォルトでOK

～
? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
～

ライブラリ追加

npm install firebase
npm install -D firebase-admin firebase-functions firebase-functions-test

localで起動する場合こちら。

$ firebase emulators:start

firebaseにデプロイする場合はこれ。

firebase deploy

APIを呼ぶ

接続情報をfirebaseインスタンスに設定
Pluginに書いておくとよい。

xxxxxxxxxxxxxxxはFirebase側で作成したプロジェクトの値を適用。
なお、この情報は秘匿しなくてもいい模様。なんならデプロイしたFQDNにこれつけると見れる。
https://xxxxxxxxxxxxxxx/__/firebase/init.js

plugins/firebase.ts

import { initializeApp } from 'firebase/app'
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin(() => {

    const firebaseConfig = {
        apiKey: xxxxxxxxxxxxxxx,
        authDomain: xxxxxxxxxxxxxxx,
        databaseURL: xxxxxxxxxxxxxxx,
        projectId: xxxxxxxxxxxxxxx,
        storageBucket: xxxxxxxxxxxxxxx,
        messagingSenderId: xxxxxxxxxxxxxxx,
        appId: xxxxxxxxxxxxxxx,
        measurementId: xxxxxxxxxxxxxxx
    }

    // インスタンスにConfigを登録する
    initializeApp(firebaseConfig)

})

ComposablesにAPIアクセサを実装

~\composables\useReviewApi.ts

import {
  getFirestore,
  collection,
  query,
  getDocs,
} from 'firebase/firestore'
// これはAPIの応答に型をつけたかったんだけれどもまだ適切な定義方法模索中。
import type { Review } from '~/types/api/Review'

export const useReviewApi = () => {

  // 検索（reviewsというエンドポイントにアクセスするイメージ）
  const selectAll = async ()=> {
    const records: Review[] = []
    const queryCondition = query(collection(getFirestore(), 'reviews'))
    const docs = await getDocs(queryCondition)
    docs.forEach((doc) => {
      records.push(doc.data() as Review)
    })
    return records
  }

  return {selectAll}
}

呼び出しイメージ

app.vue

<template>
  <div>
    <div
      v-for="val in data"
      :key="val.reviewId"
    >
      {{ val.name }}
    </div>
  </div>
</template>
<script setup="ts">

const { selectAll } = useReviewApi()
const data = ref(null)

onMounted(async () => 
  data.value = await selectAll() 
) 
</script> 

実行結果

firestoreの型定義が出てこない。。。

ググると。@firebase/firestore-typesなるものが。
https://www.npmjs.com/package/@firebase/firestore-types?activeTab=code
入れてみたけれども。AppModelTypeとかはよくわからず。。。。
雰囲気で使えるけれどもなんだかなぁ。。

firestoreのデータ型の役割。。ここ非常に参考になりました。
https://qiita.com/maiyama18/items/86a4573fdce800221b72