firebase.jsのチートシート

##envファイルの生成

ディレクトリ直下に.envファイルを設置。
そのファイルにAPIキーを貼り付ける。

.env

FIREBASE_API_KEY = '自分のapikey'
FIREBASE_AUTH_DOMAIN = '自分のapikey'
FIREBASE_PROJECT_ID = '自分のapikey'
FIREBASE_STORAGE_BUCKET = '自分のapikey'
FIREBASE_MESSAGING_SENDER_ID = '自分のapikey'
FIREBASE_APP_ID = '自分のapikey'
FIREBASE_MEASUREMENT_ID = '自分のapikey'

#####FIREBASE_API_KEYなどの名称は自由です。
#####ただ自分がわかるようにしよう！

##dotenvモジュール
dotenvなどのモジュールでエクスポートしておく。
nuxtなら@nuxt/dotenv

npm install @nuxt/dotenv

##nuxt.config.jsに記載

npm installできたらnuxt.config.jsに記載します。
まずはexport default の外にグローバル変数として定義しておきます。

nuxt.config.js

require('dotenv').config();
const { FIREBASE_API_KEY } = process.env;
const { FIREBASE_AUTH_DOMAIN } = process.env;
const { FIREBASE_PROJECT_ID } = process.env;
const { FIREBASE_STRAGE_BUCKET } = process.env;
const { FIREBASE_MESSAGEING_SENDER_ID } = process.env;
const { FIREBASE_APP_ID } = process.env;
const { FIREBASE_MEASUREMENT_ID } = process.env;

export default {
}

その後にexport　defaultのbuildのところにenvオブジェクトを生成します。

nuxt.config.js

export default {
....

build: {
    env: {
      FIREBASE_API_KEY,
      FIREBASE_AUTH_DOMAIN,
      FIREBASE_PROJECT_ID,
      FIREBASE_STRAGE_BUCKET,
      FIREBASE_MESSAGEING_SENDER_ID,
      FIREBASE_APP_ID,
      FIREBASE_MEASUREMENT_ID,
    },
  },
};

##firebase.jsにprocess.envを貼り付けて終了！
先ほど定義したenvはグローバルに利用可能なのでfirebase.jsに貼り付けます。

plugins/firebase.js

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/storage';
import 'firebase/analytics';

const config = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STRAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGEING_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID,
  measurementId: process.env.FIREBASE_MEASUREMENT_ID,
};

if (!firebase.apps.length) {
  firebase.initializeApp(config);
}
export const auth = firebase.auth;
export default firebase;

上記のようなjsファイルを使う。
import文で呼び出したらプロジェクト内でFirebaseが使えるよ。