在Nuxt2專案中使用Firebase SDK

文介紹在nuxt2專案中要如何使用Firebase SDK。

版本

firebase: 8.10.1

nuxt: 2.15.7

plugin folder

建立一個firebase.js檔案

import firebase from 'firebase/app';
import 'firebase/auth';
import "firebase/storage";
import "firebase/database";

// firebase config 可以在firebase後台看到const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
};

// 避免初始化錯誤let app = nullif (!firebase.apps.length) {
    app = firebase.initializeApp(firebaseConfig, {
        'X-Client-Name': 'web',
        'X-Client-Version': '1.0.0'
    })
}

然後視專案需求inject需要的module到nuxt

const storage = firebase.storage();
const auth = firebase.auth();

export default (ctx, inject) => {
    inject('storage', storage);
    inject('auth', auth);
}

然後就可以在nuxt中使用"$"來使用firebase啦

// storage
const storageRef = this.$storage.ref(
    `images/posts/${postId}/content/${fileName}`
);

// auth
const user = this.$auth.currentUser;