Web Development

Nuxt.jsでFirebase 9を利用する

作成日

2022年3月13日

Nuxt.js に Firebase を導入するために Nuxt Firebase というパッケージが用意されていますが，公式ドキュメントをよく見てみると v7.5 から更新されていません．

一方で，Firebase はバージョン８の namespaced 形式からバージョン９の modular 形式へと仕様が変更されています．

現在の Nuxt Firebase の最新バージョンは v8.2.2 ですが，Nuxt Firebase v8+ では modular 形式のサポートとなっています．また，パッケージの実装は終わっていないようで，modular 形式を導入する場合にはパッケージではなく，自分で導入するようにと書かれていました．

インストール

バージョン９の firebase パッケージをインストールします．

terminal

$ yarn add firebase

設定

firebase の初期化は一回のみ行う必要があります．初期化されている状態で初期化の処理を行おうとするとエラーが発生するため，プラグインで実装します．

plugins/firebase.js

import { initializeApp, getApps } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'
import { getAuth } from 'firebase/auth'

const firebaseConfig = {
  apiKey: '<replace this>',
  authDomain: '<replace this>',
  databaseURL: '<replace this>',
  projectId: '<replace this>',
  storageBucket: '<replace this>',
  messagingSenderId: '<replace this>',
  appId: '<replace this>',
}
const apps = getApps()
const firebaseApp = !apps.length ? initializeApp(firebaseConfig) : apps[0]

const db = getFirestore(firebaseApp, {})
const auth = getAuth(firebaseApp, {})

export { db }

設定ファイルも編集します．

nuxt.config.js

export default {
  ...,

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: ['~/plugins/firebase.js'],

}

使用方法

プラグインを用意したら，各コンポーネントで読み込むだけです．

sample.vue

<script>
import { auth } from '@/plugins/firebase.js'
import { createUserWithEmailAndPassword } from 'firebase/auth'

export default {
  methods: {
    async createUser() {
      try {
        const userCredential = await createUserWithEmailAndPassword(
          auth,
          this.email,
          this.password
        )
      } catch (e) {
        console.error(e)
      }
    },
  },
}
</script>

インストール

設定

使用方法

参考