前置き
nuxt/firebase
今までよりもっと簡単に
firebaseを使えて
パフォーマンスを向上するものです✨
今回は導入方法と
使い方を載せています✍️
非常に簡単なので
firebaseを使っている方は
ぜひやってみてください！
導入方法
まずはインストールから。
terminal
$ npm install firebase
$ npm install @nuxtjs/firebase
そしてnuxt.config.jsで設定💫
今まではplugins/firebase.jsを作って
読み込んでいましたが
それが不要です💡
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
modules: [ [ '@nuxtjs/firebase', { config: { apiKey: '<apiKey>', authDomain: '<authDomain>', // databaseURLはなくてOK projectId: '<projectId>', storageBucket: '<storageBucket>', messagingSenderId: '<messagingSenderId>', appId: '<appId>', measurementId: '<measurementId>' }, services: { auth: true // Just as example. Can be any other service. } } ] ], |
または
|
1 2 3 4 5 |
modules: ['@nuxtjs/firebase'], firebase: { // options } |
servicesは
使いたいものをtrueにするだけでOK🙆♀️
⬇️利用可能なサービスはこちら
|
1 2 3 4 5 6 7 8 9 10 11 |
services: { auth: true, firestore: true, functions: true, storage: true, database: true, messaging: true, performance: true, analytics: true, remoteConfig: true } |
使い方
使いたいサービスを$fireで書きます。
実際使用する際にはthisが必要なのでthis.$fire.auth
といった感じになります💡
サンプル1
nuxt.config.jsではservicesでfirestore: true,
にしています。trueにするのを忘れてしまうと
このようなエラーがでます。
Error
TypeError: Cannot read property 'collection' of undefined
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<template> <div class="page"> <input type="text" v-model="text" /> <button @click="submit"> submit </button> </div> </template> <script> export default { data() { return { text: '' } }, methods: { async submit() { try { this.$fire.firestore.collection('sample') .add({ text: this.text }) .then((ref) => { console.log('Add ID: ', ref.id) }) } catch (e) { console.log(e) } } } } </script> |
サンプル2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<template> <div class="page"> <form class="form" @submit.prevent> <label class="label"> <span class="label"> email </span> <input class="input" type="text" v-model="email" /> </label> <label class="label"> <span class="label"> password </span> <input class="input" type="password" v-model="password" /> </label> <button class="button" type="submit" @click="createAccount" > createAccount </button> </form> </div> </template> <script> export default { data() { return { email: '', password: '' } }, methods: { async createAccount() { try { await this.$fire.auth .createUserWithEmailAndPassword(this.email, this.password) .then(() => { console.log('done!') }) } catch (e) { console.log(e) } } } } </script> |
まとめ
新たにpluginsでjsファイルを
作成しなくても良く、
importする必要もないので
煩わしさがなくなりました✨
各サービスごとのオプションは
まだ試していないのですが、
(公式のSERVICE OPTIONSで
確認できます👀)
普通にfirebaseを使うよりも
nuxt/firebaseを使っても良さそうです💫😀