【Nuxt.js】Firebaseを導入する方法 - 今際の国のえんじにあ。

こんにちは、やましょです。

今回はNuxt.jsでFirebaseを導入する際の方法を紹介いたします！

手順

Firebaseでプロジェクト、アプリケーションを作成
Nuxt.jsで導入する

環境

nuxt（2.15.7）
firebase（8.9.1）
@nuxtjs/firebase（7.6.1）

それではやってみましょう！

Firebaseでプロジェクト、アプリケーションを作成

プロジェクトを作成

Firebaseへアクセスし、プロジェクトを作成します。

サイトURL：https://firebase.google.com/

今回は「yamasyo-test」というプロジェクトを作成します。

アプリケーションを作成

作成したプロジェクトの概要画面からアプリを登録します。

下記画像の箇所のウェブを選択してください。

(アップデートに伴い、見た目が変わっている可能性があります。)

npmを使用する、を選択してください。

ここに記載されている下記の値を後ほど使用します。

const firebaseConfig = {
  apiKey: "XXXXXXX",
  authDomain: "yamasyo-test.firebaseapp.com",
  projectId: "yamasyo-test",
  storageBucket: "yamasyo-test.appspot.com",
  messagingSenderId: "XXXXXXX",
  appId: "XXXXXX"
};

これでFirebaseでの準備は完了です！

Nuxt.jsで導入する

必要なnpmをインストール

npm install firebase
npm install @nuxtjs/firebase

モジュールの設定をする

nuxt.config.jsで下記の設定を行います。

modules: [
    [
      '@nuxtjs/firebase',
      {
        config: {
          apiKey: '<apiKey>',
          authDomain: '<authDomain>',
          projectId: '<projectId>',
          storageBucket: '<storageBucket>',
          messagingSenderId: '<messagingSenderId>',
          appId: '<appId>',
          measurementId: '<measurementId>'
        },
        services: {
          auth: true // 使用するサービスを記載
        }
      }
    ]
  ],

このような書き方でも記載可能です。

modules: ['@nuxtjs/firebase'],

firebase: {
   // options
}

また、servicesでは、Firebaseの使用するサービスを記載します。

services: {
  auth: true,
  firestore: true,
  functions: true,
  storage: true,
  database: true,
  messaging: true,
  performance: true,
  analytics: true,
  remoteConfig: true
}

これで設定完了です！