Nuxt.jsでFirebase Realtime Databaseの読み書きを行う

Nuxt.jsのWebアプリから、FirebaseのRealtimeDatabaseの読み書きを行ったので、手順をまとめておきます。

Firebase Realtime Databaseの作成

事前にFirebaseコンソールからプロジェクトを作成し、Webアプリを追加します。

その後、Realtime Databaseを作成してください。
作成時の各設定は任意に行ってOKです。

Nuxt.js側にFirebaseの設定

Nuxt.js側でFirebaseを操作するため、必要なモジュールをインストールして設定していきます。
今回は、Nuxt.jsでのFirebaseの操作に便利な nuxtjs/firebaseもインストールします。

下記コマンドを実行してください。

npm install --save firebase @nuxtjs/firebase

次に、 nuxt.config.js に下記設定を追加します。

nuxt.config.js

export default {

  modules: [
    [
      '@nuxtjs/firebase',
      {
        config: {
          apiKey: '<apiKey>',
          authDomain: '<authDomain>',
          projectId: '<projectId>',
          storageBucket: '<storageBucket>',
          messagingSenderId: '<messagingSenderId>',
          appId: '<appId>',
          measurementId: '<measurementId>'
        },
        services: {
          database: true // Realtime Databaseの使用を宣言
        }
      }
    ]
  ],

}

<apiKey> など、それぞれの項目に指定する値は、Firebaseコンソールの「プロジェクトの設定」から、下記のように確認可能です。
（Nuxt.jsのプロジェクトに追記する際はenvファイルを利用するなどしてください）

データの読み書き

基本的にデータの読み書きはドキュメント通りです。
今回は例として、下記のように実装します。

pages/index.vue

<template>
  <div>
    <button @click="increment">send</button>
    <span>count:</span>
    <span>{{ count }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  mounted() {

    // RealtimeDatabaseの更新を検知
    this.$fire.database.ref('count').on('value', (snapshot) => {
      this.count = snapshot.val();
    })
  },
  methods: {

    // RealtimeDatabaseを更新
    increment() {
      this.$fire.database.ref('count').set(
        ++this.count
      );
    }
  }
}
</script>

ページを確認すると、このように表示されます。

「send」ボタンを押すことで、 increment() が呼ばれ、Realtime Database上の値が更新されます。

Realtime Database上の値が更新されると、Webアプリ側は更新を検知して自動で値が同期されます。

これだけです！
さくっと導入でき、とても簡単ですね！