こんにちは、やましょです。
今回は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
}
これで設定完了です!
最後に
ここまでの設定が完了すれば、app.$fire
、this.$fire
でFirebaseの機能を使用できます。
(例:Authenticationを使用する場合は、this.$fire.auth
)