loading...

Firebase with Nuxt ①準備編

ryunishimura profile image Ryu Nishimura Updated on ・1 min read

Firebase SDKをインストール

yarn add firebase
Enter fullscreen mode Exit fullscreen mode

firebase.js

// warningが出るので、使うパッケージだけインポート
import firebase from 'firebase/app'
import "firebase/auth"
import "firebase/storage"
import "firebase/firestore"

if (!firebase.apps.length) {
  firebase.initializeApp({
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.FIREBASE_DATABASE_URL,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.FIREBASE_APP_ID,
    measurementId: process.env.FIREBASE_MEASUREMENT_ID
  })
}
export const auth = firebase.auth()
export const storage = firebase.storage()
export const db = firebase.firestore()
export default firebase
Enter fullscreen mode Exit fullscreen mode

こんな感じでexportしておくと便利!

それぞれ以下のような形で読み込みます。

import { auth, storage, db } from '@/plugins/firebase'
import firebase from '@/plugins/firebase'
Enter fullscreen mode Exit fullscreen mode

nuxt.config.js

plugins: ["@/plugins/firebase"],
Enter fullscreen mode Exit fullscreen mode

Posted on by:

ryunishimura profile

Ryu Nishimura

@ryunishimura

Favorites❤️ JAMStack/Serverless/Nuxt.js/Contentful

Discussion

pic
Editor guide