firebase

【Nuxt.js】firebase導入編:nuxt/firebaseを導入しよう

前置き

nuxt/firebase
今までよりもっと簡単に
firebaseを使えて
パフォーマンスを向上するものです✨

今回は導入方法と
使い方を載せています✍️
非常に簡単なので
firebaseを使っている方は
ぜひやってみてください!


導入方法

Getting Started

まずはインストールから。

terminal

$ npm install firebase

$ npm install @nuxtjs/firebase

そしてnuxt.config.jsで設定💫

今まではplugins/firebase.jsを作って
読み込んでいましたが
それが不要です💡

または

services
使いたいものを
trueにするだけでOK🙆‍♀️

⬇️利用可能なサービスはこちら


使い方

Usage

使いたいサービスを
$fireで書きます。
実際使用する際には
thisが必要なので
this.$fire.auth
といった感じになります💡


サンプル1

nuxt.config.jsでは
services
firestore: true,
にしています。

trueにするのを忘れてしまうと
このようなエラーがでます。

Error

TypeError: Cannot read property 'collection' of undefined


サンプル2


まとめ

新たにpluginsでjsファイルを
作成しなくても良く、
importする必要もないので
煩わしさがなくなりました✨

各サービスごとのオプションは
まだ試していないのですが、
(公式のSERVICE OPTIONS
確認できます👀)

普通にfirebaseを使うよりも
nuxt/firebaseを使っても良さそうです💫😀

-firebase
-,

© 2021 aLiz Nuxt