Nuxt.jsでFirebase Realtime Databaseを使う

2021/06/19

#Vue.js/Nuxt.js

備忘録です。

初期設定


ライブラリのインストール

npm install --save firebase


Firebaseの初期化
plugins/firebase.js

import firebase from "firebase";
if (firebase.apps.length === 0) {
firebase.initializeApp({
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
});
}
export default firebase;


書き込み


セキュリティルールで書き込み・読み込みにユーザー限定の設定をしている場合は認証が必要です。
単純にデータを書き込む場合

firebase.database().ref(書き込み先).set({
    name:"Taro",
    age:16
});


pushでkeyを生成してから書き込む場合

let db = firebase.database().ref(書き込み先).push()
db.set({
    title:"hello world"
    body:"こんにちは"
})
let key = db.key //生成されたキーを取得できます。


読み込み

let db = firebase.database().ref(読み込み先)
db.get().then(ans=>{
    if (ans.exists()){//データが存在するか確認
        console.log(ans.val()) //データを出力
    }else{
        console.log("データが存在しません")
    }
}).catch(error=>{
    console.log(error)
})


更新

let db = firebase.database().ref(更新先).update({
    name:"hanako"
})


削除


削除する場合はsetでnullを設定するかremove関数呼び出すことで削除できます。
セキュリティルールの設定に引っかかった場合はパーミッションエラーが返されます。


関連記事:Vue.js/Nuxt.js

Nuxt.js + microCMS + Nuxt Contentでブログを作り直してみた

Vue.js/Nuxt.js

[Nuxt.js]動的なルーティングを含めてgenerateする方法

Vue.js/Nuxt.js

[Nuxt.js]nuxt.config.jsに環境変数を定義してプログラムから読み込む方法

Vue.js/Nuxt.js