2
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Firebase を Nuxt.js で使ってみよう

Last updated at Posted at 2019-01-16

はじめに

以前 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 が利用可能です!

確認しよう

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

:link: Firebase の Google 認証を Vue.js(Nuxt.js) で実装してみよう

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

(記事が書けたらリンクを有効化します)
(記事が書けました!)

まとめ

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

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

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

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

:link: Vue.js 初心者がなにか作りきってみる(願望)

2
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?