【Nuxt.js】Firebaseを導入する方法

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

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

手順

  1. Firebaseでプロジェクト、アプリケーションを作成
  2. 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
}

これで設定完了です!

最後に

ここまでの設定が完了すれば、app.$firethis.$fireでFirebaseの機能を使用できます。

(例:Authenticationを使用する場合は、this.$fire.auth

参考サイト

https://firebase.nuxtjs.org/