【Vue.jsとfirebase】Authenticationだけを使用する方法について調べた件。

vue.jsとfirebaseを使用して投げ銭アプリなるものを作成しています。

日本にも「いんすたぐらまー」とか「ゆーちゅーばー」とかいますけど、韓国、中国、台湾あたりじゃ「らいばー」ってのもアツいわけですよ。それこそ2019年にはナショナルジオグラフィックで取り上げられてますからね。

話をもとに戻しまして、

今作成中のアプリにはユーザーの新規登録画面やログイン機能、認証といった機能を実装したいわけです。
vue.jsとfirebaseを使用して前述した機能を実装するのに参考になる記事はQIITAでも何本もありますんで、参考にすればほぼほぼ間違いなく作成することはできます。

このへんの参考記事をみればね。
VueでFirebaseを使いログイン認証が必要な専用ページを作ろう
Vue.js+Firebase Authenticationで認証画面を爆速実装！
Vue.js + Firebase を使って爆速でユーザ認証を実装する

ただ、それを参考に作成してみて、その後にfirebaseの公式ドキュメントを読んでいるとひとつだけ気になる箇所があったので、そこを修正しました。

それが題名のところでして、
Firebase JavaScript SDK全体を使用するんじゃなくて、使用したいSDKのみを使用する方法です。

なんでわざわざ？

Firebase JavaScript SDK全体を読み込めてるんだから別にいいじゃない。大は小を兼ねるとも思いますが、、書いてあったんですよ公式に

本番環境のウェブアプリの場合、SDK 全体の読み込みは効率的ではありません。
この方法は開発環境でのみ使用してください。

ってことなんで違う方法でやろうかなと。公式に書いてある事が全部できれば、何でもやれるようになるわけですしねぇ。

で、どうやるかというと

公式嫁！って言ってしまえば終わるんですが、自分自身が公式読んでもいまいちピンと来なかったんで、具体的な実践方法（答え）を書いておきます。

問題を解いて答え合わせするっていう方法だけでなく、先に答えをみてから理解するって学習もありですもんね。

QIITA記事を参考にして作った現在のコード
src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import firebase from 'firebase'

Vue.config.productionTip = false

const config = {
   apiKey: 'YOUR_KEY',
   authDomain: 'YOUR_DOMAIN.firebaseapp.com',
   databaseURL: 'YOUR_DOMAIN.firebaseio.com',
   projectId: 'YOUR_ID',
   storageBucket: 'YOUR_BUCKET_ID.appspot.com',
   messagingSenderId: 'YOUR_SENDER_ID'
}

firebase.initializeApp(config);


new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})

src/vues/Signup.vue

<template>
 /* 省略 */
</template>

<script>
import firebase from 'firebase'

export default {
/* 省略 */
}
</script>

<style scoped>
/* 省略 */
</style>

書き直した結果のコード

src/main.js

//import Vue from 'vue'
//import App from './App'
//import router from './router'
import * as firebase from "firebase/app";

//Vue.config.productionTip = false

//const config = {
   //apiKey: 'YOUR_KEY',
   //authDomain: 'YOUR_DOMAIN.firebaseapp.com',
   //databaseURL: 'YOUR_DOMAIN.firebaseio.com',
   //projectId: 'YOUR_ID',
   //storageBucket: 'YOUR_BUCKET_ID.appspot.com',
   //messagingSenderId: 'YOUR_SENDER_ID'
}

//firebase.initializeApp(config);

//new Vue({
 //el: '#app',
 //router,
 //template: '<App/>',
 //components: { App }
//})

変えのはこの部分

import * as firebase from "firebase/app";

src/vues/Signup.vue

<template>
 /* 省略 */
</template>

<script>
import * as firebase from "firebase/app";
import "firebase/auth";
export default {
/* 省略 */
}
</script>

<style scoped>
/* 省略 */
</style>

ここが変わってます

import * as firebase from "firebase/app";
import "firebase/auth";

最後に

間違ってる！とかもっと詳しく！とかコメントもらえたら喜びます。