はじめに

以前 Firebase を Nuxt.js で使ってみようという記事を書きましたが、最近 Nuxt.js 版を書きたいと思います。

Firebase is 何？ ～ Firebase をはじめる までは同じ内容になりますので、上の記事を参考にしてみてください。

Nuxt.js で使うには？

たとえば index.vue に次のようにコーディングします。

Firebase コンソール側で表示されたスクリプトを mounted() 内にコーディングしています。

pages/index.vue

import firebase from 'firebase'

export default {
  mounted() {
    if (!firebase.apps.length) {
      firebase.initializeApp(
        {
          apiKey: 'AIzaSyD32vSszxnkAO57Tm2i9rf-cVMf8XKYSis',
          authDomain: 'my-project-95530.firebaseapp.com',
          databaseURL: 'https://my-project-95530.firebaseapp.com',
          projectId: 'my-project-95530',
          storageBucket: 'my-project-95530.appspot.com',
          messagingSenderId: '800278616293'
        }
      )
    }
  }
}

これで Firebase が利用可能です！

確認しよう

~~と言いたいところですが、認証部分実装がまだなため画面を立ち上げても現状確認が出来ません。~~

Firebase の Google 認証を Vue.js（Nuxt.js）で実装してみよう

こちら側の記事で実際に Firebase を利用して認証する実装を行っていますので、そちらでご確認ください！

~~（記事が書けたらリンクを有効化します）~~
（記事が書けました！）

まとめ

Vue.js に実装したときと同じことをしていますが、 firebase.apps の存在チェックをしたり、 APIKEY を直接セットしたり、より実用的（？）な形にしています。

前回記事でも書きましたが、ハードルが高い認証処理が簡単にかけてしまう というのは Firebase の大きなメリットだなぁと思います！

インデックスページから来た人向け

少し期間があきましたが、これからも少しづつ機能を増やしていきますので、よかったら他の記事も見てみてください！

Vue.js 初心者がなにか作りきってみる（願望）