Firebase in Nuxt.js
もし入れてないなら
code:console
$ yarn global add -g firebase-tools
npmで既に入ってるかもなので確認する npm { ls | la | list | ll} -g
yarnでインストールしたけど動かない！
yarn global addしたパッケージのパスを通す → https://qiita.com/t-hiroyoshi/items/49c03456e991594c3dc0
その後コンソールを再起動したら動いた←忘れるな
code:console
firebase init
参考：https://firebase.google.com/docs/cli?hl=ja#initialize_a_firebase_project
質問に答えてEnterえいや
Nuxt.js のプロジェクトにパッケージインストール！
code:console
$ yarn add firebase
pluginsにfirebase.jsを作成
code:firebase.js
import * as firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'
const config = {
apiKey: process.env.FB_API_KEY,
authDomain: process.env.FB_AUTH_DOMAIN,
databaseURL: process.env.FB_DATABASE_URL,
projectId: process.env.FB_PROJECTID,
storageBucket: process.env.FB_STORAGE_BUCKET,
messagingSenderId: process.env.FB_MESSAGING_SENDER_ID,
appId: process.env.FB_APPID,
measurementId: process.env.FB_MEASUREMENTID
}
if (!firebase.apps.length) {
firebase.initializeApp(config)
}
export default firebase
code:nuxt.config.js
plugins: '@/plugins/firebase',
envを使ってるけど、Nuxtでは@nuxtjs/dotenv 入れる必要あり → yarn add して modulesに追加する
vueファイル上で使う場合は nuxt.config.js の頭に require('dotenv').config() と書いておく必要あり
code:.env
FB_API_KEY = *********
この時、KEYをダブルクオーテーションで囲ってしまう凡ミスを犯し、エラーが出て困った。戒め。
store作成
code:store/index.js
import firebase from '~/plugins/firebase'
const db = firebase.firestore()
export const state = () => ({
})
export const mutations = {
}
export actions = {
fetch({ commit }) {
db.collection('hoge').get()
...
}
}
#Nuxt.js