日報(2021-05-31) firebaseui を vue のコンポーネントで使う

はじめに

５月は日報を全然書いていませんでした

連休明けからマンションの大規模修繕がはじまり、それまでにジャングル化してたベランダの折鶴蘭をなんとかする必要があって連休中はほぼそれに費やしてました
折鶴蘭は土もなんにもない所に株を伸ばして勝手に増えるのですが、増えてしばらくすると折鶴蘭の根に周りに黒い土がどんどんできてくるのが面白いです
赤い土なら黄砂なり多摩川の砂なりが飛んできたのでしょうが、黒土なのでそれらとは違います。ダンゴムシとかヤスデとかそういった虫が根だか落ち葉だかを食べて土にしてるんですね
お百姓さんはいい土が植物を育てると勘違いしてるみたいですが、実際は土は植物と虫がつくります

その他、今月は firebaseui を vue のコンポーネントにくくりだそうとしてドハマリしてました

なにが問題なのか

firebase をアプリ側、つまりコンポーネントの親側で初期化してインスタンスプロパティ (opens new window)に登録します
子コンポーネントからこれを参照するのですが Imgur (opens new window) こんな感じでエラーになります

これ、WriterDuet (opens new window) さんの この (opens new window)コメントが informative で、要するにコンポーネント側 の package.json から firebase 追い出す必要があります

firebase に依存するコンポーネント

firebaseui が firebase に依存しているので、というかまさに firebaseui が内部で異なる firebase を使ってしまうことが前述のエラーの原因なのだそうで、firebaseui も node module として持たないようにしないといけません

ちょっとはまったのが firebaseui の css で、これは <style> タグの中でインポートすることができます

<style>
/* https://medium.com/@renatello/load-external-css-file-into-vue-js-component-e61673753a2b */
@import 'https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.css';
</style>

結論

で、いろいろ頑張ってなんとかこれ (opens new window)ができたのでした、めでたしめでたし

---