Nuxt.jsでFirebaseセットアップ

Nuxt.jsでFirestoreを使う。FirebaseはWeb v9(Beta)版だと上手くいかなかったので今回はWeb v8版でいきます。2021年9月時点でv9(Beta)版はかなり新しい。

公式ドキュメントはこちら↓

各種インストール

npm install firebase@8.10.0

npm install @nuxtjs/firebase@7.6.1

envファイルを作成して環境変数セットするためにdotenvを用います。

npm install @nuxtjs/dotenv

実際のコード

nuxt.config.js

require('dotenv').config()


modules: [
    '@nuxtjs/dotenv',
    [
      '@nuxtjs/firebase',
      {
        config: {
          apiKey: process.env.API_KEY,
          authDomain: process.env.AUTH_DOMAIN,
          projectId: process.env.PROJECT_ID,
          storageBucket: process.env.STORAGE_BUCKET,
          messagingSenderId: process.env.MESSAGING_SENDER_ID,
          appId: process.env.APP_ID,
          measurementId: process.env.MEASUREMENT_ID
        },
        services: {
          auth: true,
          firestore: true,
          storage: true
        }
      }
    ]
  ],

envファイルの記述

.env

API_KEY=
AUTH_DOMAIN=
PROJECT_ID=
STORAGE_BUCKET=
MESSAGING_SENDER_ID=
APP_ID=
MEASUREMENT_ID=

Vue.jsの場合

セットアップはこちらが参考になりました。