Zenn
💬

Vue Nuxtでのfirebase連携

2024/07/12に公開
Firebase
Firestore
Nuxt
TypeScript
Vue.js
tech

Vue Nuxtでのfirebase連携

firebaseの連携時に何かまとめられてるのないかなって思った言い記事がありましたのでこちらで共有

https://qiita.com/kurararara/items/08e75cc8696df81a1e43

上記を見てもらえれば良いかと思います。

簡単に導入までのやり方下記に記載しておきます。
(僕が見る用)

プロジェクトにfirebaseをinstalll

npm install firebase

.envファイルに作成

https://zenn.dev/rionishino/articles/f25a67e9b731c9

firebase連携時にAPIキーなどが表示されます。そちらを.envファイルに記載します。
環境変数にfirebaseのキー等を記入してuseRuntimeConfig()で呼び出せる様にしておきます。
.env.local or .env.developnのどちらかもしくは両方に記載しておきます。

// .env.local or .env.developn
# Firebase 
FIREBASE_API_KEY = "xxxxxxxxxxxxxxxxxxxxxx"
FIREBASE_AUTH_DOMAIN = "xxxxxxxxxxxxxxxxxx"
FIREBASE_PROJECT_ID = "XXXXXXXXXxxxxxxxxxx"
FIREBASE_STORAGE_BUCKET = "XXXXXXXXXXXXXxX"
FIREBASE_MESSAGING_SENDER_ID =  "XXXXXXXxX"
FIREBASE_APP_ID =  "XXXXXXXXXXXxxxxxxxxxxxx"

次にプロジェクトのplugins/firebase.clients.tsを作成

こちらで連携出来る様になります。

// firebase.clients.tsファイルÿ

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

export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig()

  const firebaseConfig = {
    apiKey: config.public.FIREBASE_API_KEY,
    authDomain: config.public.FIREBASE_AUTH_DOMAIN,
    projectId: config.public.FIREBASE_PROJECT_ID,
    storageBucket: config.public.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: config.public.FIREBASE_MESSAGING_SENDER_ID,
    appId: config.public.FIREBASE_APP_ID,
  }

  const app = initializeApp(firebaseConfig)
  getAnalytics(app)
})

あとは呼び出したいfirebaseのメソッドをプロジェクト内に書き込むだけです。

Discussion